fetch-inject

library3.3.1jsnpmunverified

Fetch Inject dynamically loads JavaScript and CSS assets into the DOM using the Fetch API, enabling parallel fetching and sequential execution for performance optimization. Current stable version is 3.3.1, released in 2020. It supports TypeScript types and works with Service Workers for offline-first apps. Unlike traditional script loaders, it uses the Fetch API directly, providing fine-grained control over resource loading order and timing. Compatible with ESM and modern browsers; legacy UMD/CJS support is in v2.x.

devops

npm install fetch-inject

package ↗homepage ↗

INSTALL

IMPORT

SIG · FETCH-INJECT

fetch-inject

devopsjavascriptv3.3.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import fetchInject from 'fetch-inject'

Default import is the main function. TypeScript types are included.

fetchInject (CommonJS)

✓ const fetchInject = require('fetch-inject').default

✗ const fetchInject = require('fetch-inject')

CJS require returns an object with default export, so .default is needed.

TypeScript types

✓ import type { FetchInjectResponse } from 'fetch-inject'

✗ import { FetchInjectResponse } from 'fetch-inject' (if value import is not intended)

For type-only imports, use `import type` to avoid runtime errors.

Demonstrates basic usage: parallel fetch of JS and CSS, then injection in order.

import fetchInject from 'fetch-inject'; fetchInject([ 'https://cdn.example.com/lib.js', 'https://cdn.example.com/style.css' ]).then((results) => { console.log('Assets loaded:', results); }).catch((err) => { console.error('Loading failed:', err); });

Debug

Known issues

gotchaCJS require() does not work as expected in Node.js environment. The package uses ESM and expects browser Fetch API.

fix

Use dynamic import() in Node or use v2.x which supports CJS.

affects: >=3.0.0

gotchaThe second argument 'promise' can delay injection until a given Promise resolves. This can cause confusion if omitted but expected.

fix

Explicitly pass undefined or Promise.resolve() if no delay needed.

affects: >=1.0.0

deprecatedOptions argument's custom fetch implementation signature changed in v3; older patterns may break.

fix

Ensure custom fetch function matches the standard fetch API signature.

affects: >=3.0.0

Errors

Common errors & fixes

TypeError: Failed to fetch

The resource URL is invalid or not accessible due to CORS restrictions.

fix

Verify the URL is correct and the server allows CORS requests.

SyntaxError: Unexpected token '<'

The fetched resource is HTML (error page) instead of JS/CSS.

fix

Check that the URL points to a valid script or stylesheet.

TypeError: fetchInject is not a function

Incorrect import style; using require() without .default in CJS.

fix

Use `const fetchInject = require('fetch-inject').default`.

Upgrade

Version history

3.3.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

packagefetch-inject ↗

homepagehttps://vhs.codeberg.page/code/fetch-inject/ ↗