leozdgao / react-async-script-loader Goto Github PK
View Code? Open in Web Editor NEWA decorator for script lazy loading on react component
License: MIT License
A decorator for script lazy loading on react component
License: MIT License
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!
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
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 :)
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.
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
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 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.
Not clear how this method is used, are there any examples anywhere?
Hi @leozdgao
Very nice work! Saved my day LOL. Just one question: is there any way to recycle unused scripts?
Cheers,
Guan
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?
has no buissinsess
hoist-non-react-statics requires 2.5.0 to work with newer versions of react.
react 16.3+ | >= 2.5.0
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.
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 :)
Then we should use this.refs.loadedScriptComponent. getWrappedInstance() get the wrapped instance ... whatever api....
Hi.
Can you please publish new npm version that includes changes from this pr #6 ?
Thanks.
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.
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
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.