react-async-loader

0.1.2 verified Fri May 01 auth: no javascript maintenance

Async script loading composition for React components, supporting jsonp and multiple script loading. Currently at version 0.1.2, with an API redesign in 0.1.0 that introduced mapScriptsToProps configuration. It provides a higher-order component to load external scripts (e.g., Google Maps) and inject them as props. Unlike libraries like react-loadable, it focuses on script injection rather than code splitting. Package has minimal dependencies: React >=0.13. Release cadence is low, with no newer versions since 2015.

Common errors

error TypeError: Cannot read property 'default' of undefined ↓

cause Using CommonJS require without .default when the module is an ES module default export.

fix

Use const asyncLoad = require('react-async-loader').default;

error Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. ↓

cause The wrapped component is undefined because the script injection failed to load.

fix

Check that the script URL is accessible and the globalPath matches a property on window after loading.

error Uncaught ReferenceError: someGlobal is not defined ↓

cause The script has not loaded before the component renders, or the global variable does not exist.

fix

Ensure the script sets the expected global variable. Consider using jsonp: true if the script supports JSONP callbacks.

Warnings

gotcha The script global path must exist on window after loading; otherwise the prop will be undefined. ↓

fix Ensure the script sets a global variable matching the globalPath key.

deprecated Package has not been updated since 2015; may not work with React >16 or modern build tools. ↓

fix Consider using newer alternatives like react-loadable or @loadable/component for script loading.

breaking API changed in version 0.1.0: mapScriptsToProps now receives props and returns a config object; previous API was different. ↓

fix Upgrade to 0.1.0+ and update usage to pass a function that returns config.

Install

npm install react-async-loader

yarn add react-async-loader

pnpm add react-async-loader

Imports

asyncLoad

wrong

const asyncLoad = require('react-async-loader')

correct

import asyncLoad from 'react-async-loader'

Default export; requires ESM or CommonJS transpilation.

asyncLoad (default)
wrong
```
const asyncLoad = require('react-async-loader')
```
correct
```
const asyncLoad = require('react-async-loader').default
```
In CommonJS, the module.exports is the default export; using require without .default will not work in some bundlers.

Quickstart

Shows basic usage: wrap a component with asyncLoad to inject an external script as a prop.

import React from 'react';
import asyncLoad from 'react-async-loader';

const MyComponent = ({ loadedScript }) => (
  <div>{loadedScript ? 'Script loaded' : 'Loading...'}</div>
);

const mapScriptsToProps = (props) => ({
  loadedScript: {
    globalPath: 'myLib',
    url: 'https://cdn.example.com/myLib.js',
    jsonp: false
  }
});

export default asyncLoad(mapScriptsToProps)(MyComponent);