{"id":26146,"library":"react-async-loader","title":"react-async-loader","description":"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.","status":"maintenance","version":"0.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/EdStudio/react-async-loader","tags":["javascript","React","Async","Script Loader"],"install":[{"cmd":"npm install react-async-loader","lang":"bash","label":"npm"},{"cmd":"yarn add react-async-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-async-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React components, version >=0.13 required.","package":"react","optional":false},{"reason":"Used internally to hoist static methods from wrapped component.","package":"hoist-non-react-statics","optional":false}],"imports":[{"note":"Default export; requires ESM or CommonJS transpilation.","wrong":"const asyncLoad = require('react-async-loader')","symbol":"asyncLoad","correct":"import asyncLoad from 'react-async-loader'"},{"note":"In CommonJS, the module.exports is the default export; using require without .default will not work in some bundlers.","wrong":"const asyncLoad = require('react-async-loader')","symbol":"asyncLoad (default)","correct":"const asyncLoad = require('react-async-loader').default"}],"quickstart":{"code":"import React from 'react';\nimport asyncLoad from 'react-async-loader';\n\nconst MyComponent = ({ loadedScript }) => (\n  <div>{loadedScript ? 'Script loaded' : 'Loading...'}</div>\n);\n\nconst mapScriptsToProps = (props) => ({\n  loadedScript: {\n    globalPath: 'myLib',\n    url: 'https://cdn.example.com/myLib.js',\n    jsonp: false\n  }\n});\n\nexport default asyncLoad(mapScriptsToProps)(MyComponent);","lang":"javascript","description":"Shows basic usage: wrap a component with asyncLoad to inject an external script as a prop."},"warnings":[{"fix":"Ensure the script sets a global variable matching the globalPath key.","message":"The script global path must exist on window after loading; otherwise the prop will be undefined.","severity":"gotcha","affected_versions":"*"},{"fix":"Consider using newer alternatives like react-loadable or @loadable/component for script loading.","message":"Package has not been updated since 2015; may not work with React >16 or modern build tools.","severity":"deprecated","affected_versions":"0.1.2"},{"fix":"Upgrade to 0.1.0+ and update usage to pass a function that returns config.","message":"API changed in version 0.1.0: mapScriptsToProps now receives props and returns a config object; previous API was different.","severity":"breaking","affected_versions":"<0.1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use `const asyncLoad = require('react-async-loader').default;`","cause":"Using CommonJS require without .default when the module is an ES module default export.","error":"TypeError: Cannot read property 'default' of undefined"},{"fix":"Check that the script URL is accessible and the globalPath matches a property on window after loading.","cause":"The wrapped component is undefined because the script injection failed to load.","error":"Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined."},{"fix":"Ensure the script sets the expected global variable. Consider using jsonp: true if the script supports JSONP callbacks.","cause":"The script has not loaded before the component renders, or the global variable does not exist.","error":"Uncaught ReferenceError: someGlobal is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}