leozdgao/react-async-script-loader

A decorator for script lazy loading on react component

react-async-script-loader's Issues

Getting the "import PropTypes from 'prop-types'..." warning in React 15.5.x

Mismatching with react 15.6.1

Hey guys,

I have an issue related to versioninig in CentosRHEL7, I use react 15.6.1 and react-google-recaptcha which relay on react-async-script-loader

here's my configuration.
"dependencies": { "react": "^15.6.1", "react-awesome-modal": "2.0.3", "react-calendar": "^2.14.0", "react-dom": "^15.6.1", "react-google-recaptcha": "^0.13.0", "react-infinite-calendar": "^2.3.1", "react-moment": "^0.7.0", "react-redux": "^5.0.5", "react-router": "^3.0.0", "react-router-dom": "4.2.2", "react-time-picker": "^2.3.2", "redbox-react": "^1.3.6", "redux": "^3.6.0", "redux-immutable": "4.0.0", "redux-thunk": "^2.2.0", "reselect": "3.0.1", "superagent": "^2.0.0", "whatwg-fetch": "^2.0.3" } // and other dependencies..
> npm install
npm WARN [email protected] requires a peer of react@>=16.4.1 but none is installed. You must install peer dependencies yourself.

By the way, I do not have this issue on Windows!
How can I force to download the 0.11.1 instead of 1.0.0 which is very compatible with react 15.6.1 compared to 16.

Thanks!

How to override onScriptLoaded function?

Hi. I'm trying to set a function different from noop (the default) to be triggered but I can't seem to be able to do it. I've tried changing defaultProps for the wrapped component but that didn't work.

Ideally, I wanted to be able to define the function when I call the scriptLoader function, maybe like this:
(the name of my wrapper component is Metrics)

export default scriptLoader(
  [
    'http://path.to.my.script.net/script.js'
  ],'', function(){ console.log('onScriptLoader was called...'); })(Metrics);

Is this (or something like this) possible?

Thank you

"_isMounted" is not on latest release (0.2.1)

I came across the same bug that was reported on this issue: #7

however, I am not seeing the changes that fix that issue on the release installed on my project (which is 0.2.1 according to its own package.json). If I browse to my_project_dir/node_modules/react-async-script-loader/lib/index.js and search for isMounted string, it finds nothing. I look at the code for the ScriptLoader componentDidMount function and effectively there is no isMounted handling.

Can you confirm this? Is there anything I can do to help you get this released ASAP?

Keep up the good work :)

Issue with Script Loader calling setState on an unmounted component

When my component unmounts prior to the ScriptLoader finishing loading the scripts I get the following error:

"setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component."

The ScriptLoader should be listening for componentWillUnmount and not call the setState.

this.props.onScriptLoaded is not a function

Getting this from ScriptLoader:

Uncaught TypeError: _this2.props.onScriptLoaded is not a function
    at ScriptLoader.eval (eval at <anonymous> (app.js:7019), <anonymous>:137:32)
    at CallbackQueue.notifyAll (eval at <anonymous> (app.js:1263), <anonymous>:76:22)
    at ReactUpdatesFlushTransaction.close (eval at <anonymous> (app.js:139), <anonymous>:59:24)
    at ReactUpdatesFlushTransaction.closeAll (eval at <anonymous> (app.js:500), <anonymous>:209:25)
    at ReactUpdatesFlushTransaction.perform (eval at <anonymous> (app.js:500), <anonymous>:156:16)
    at ReactUpdatesFlushTransaction.perform (eval at <anonymous> (app.js:139), <anonymous>:89:32)
    at Object.flushBatchedUpdates (eval at <anonymous> (app.js:139), <anonymous>:172:19)
    at ReactDefaultBatchingStrategyTransaction.closeAll (eval at <anonymous> (app.js:500), <anonymous>:209:25)
    at ReactDefaultBatchingStrategyTransaction.perform (eval at <anonymous> (app.js:500), <anonymous>:156:16)
    at Object.batchedUpdates (eval at <anonymous> (app.js:1028), <anonymous>:62:26)

Looks like it's coming from startLoadingScripts in componentDidMount

Support for < script type="module"> and < script nomodule > attribute is missing

Is it possible to load the script on window or dom load?

Hi, this is more of a question than an issue but I was wondering if it was possible to load the script after the window has loaded or DOM has loaded on the page.

I technically can put an event handler (like DOM, window loaded etc) in componentDidMount on my component but this kinda becomes an issue when we're using stateless components.
It'd be nice if react-async-script-loader actually supported this natively. Any thoughts?

My componentDidMount() is never invoked

My render() and my componentWillReceiveProps() are invoked, but my componentDidMount() is never invoked. I am using your composition technique:

export default scriptLoader(
    "/assets/global/plugins/backstretch/jquery.backstretch.min.js"
)(ResetPasswordPage);

Here are the versions of things I am using:

"react": "^15.0.1",
"react-async-script-loader": "^0.2.1",
"react-document-title": "^2.0.1",
"react-dom": "^15.0.1",
"react-router": "^1.0.3",

Using webpack and babel-loader for tooling.

Is this expected behavior? Reading your doc, I would have thought that my componentDidMount() should be called.

How is onScriptLoaded intended to be used?

Not clear how this method is used, are there any examples anywhere?

Recycle unused scripts

Hi @leozdgao

Very nice work! Saved my day LOL. Just one question: is there any way to recycle unused scripts?

Cheers,
Guan

Support React16

Is compatible with react v16??

React.createClass is deprecated

I'm getting this error after integrating this module:

warning.js:36 Warning: react: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

Any idea to solve it?

https protocol failed!

has no buissinsess

Doesnt work with react 16.3+

hoist-non-react-statics requires 2.5.0 to work with newer versions of react.
react 16.3+ | >= 2.5.0

support for <script crossorigin> attribute?

Sorry if this duplicates #22, but I didn't want to hijack that issue in case there is a different solution for crossorigin. I might be able to add this myself but I just wanted to check if there was a good reason not to support script attributes in this library.

Dynamic script urls (from props)

This library is pretty useful as it is, but having the option to dynamically generate the script URLs based on props would make it more generic.

Example use case: you want to load an API library (say Google API) but want to dynamically inject the API_KEY based on config fetched from server, or logged in user permissions/profile, and so on.

Basically being able to do something like:

const Enhanced = AsyncScriptLoader(props => {
  return [
          'https://ajax.googleapis.com/ajax/libs/jquery/' +
            props.version +
            '/jquery.min.js'        
  ]
})(MyComponent)

// later on
<MyComponent version='3.0.0' />

In addition this will make this library play much nicer with recompose in which a stream of props is generated from HOC to HOC.

Pull request to follow :)

We need a withRef prop

Then we should use this.refs.loadedScriptComponent. getWrappedInstance() get the wrapped instance ... whatever api....

Publish new NPM version

Hi.
Can you please publish new npm version that includes changes from this pr #6 ?
Thanks.

Attributes for script element

Some of the third party social libraries require locale attribute to be set which would then set the locale for the widget. Can we have a provision to add attributes to the scripts before it is added to the DOM.

props in componentDidMount are both false?

Could someone explain to my what's happening in the example?

componentWillReceiveProps(nextProps) {
    const { isScriptLoaded, isScriptLoadSucceed } = nextProps

    if (isScriptLoaded && isScriptLoadSucceed) {
      // Do stuff
    }
  }

  componentDidMount() {
    const { isScriptLoaded, isScriptLoadSucceed } = this.props
    console.log(isScriptLoaded, isScriptLoadSucceed) // false false
  }

I don't understand why
console.log(isScriptLoaded, isScriptLoadSucceed) are returning false whereas the props in CWRP are both true.

I mean when the lifecycle hit CWM shouldn't they both be true as well?

Thanks

Incorrect NPM version?

The version on npm is 0.3.0 yet the master branch is 0.2.3 which seems to be the latest and has the correct updates for React 16 etc. whereas 0.3.0 doesn't.

Not loading the script (I think)

I am trying to use this guide here (http://cubettech.com/blog/integrating-paypal-rest-api-with-react-js/) to insert a paypal button in my react app, and I am getting an error that paypal is not defined. My guess it has something to do with scriptLoader, either not working or not configured properly.

Is there anyone who can help me out with this? I'm sure it's something simple i'm overlooking. Thanks in advance!

./src/PayPalExpressCheckOut.js Line 41: ‘paypal’ is not defined no-undef Line 60: ‘paypal’ is not defined react/jsx-no-undef