Menu
In my previous Meteor app, using browserify, and React, all was working until I switched to meteor webpack.
I use react-select in my Meteor apps and it worked great but with browserify I could prevent multiple copies of react from loading which prevents this error I'm now having:
Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
My package.json look this:
... "dependencies": { "classnames": "^2.1.3", "lodash": "^3.10.0", "react": "^0.14.6", "react-dom": "^0.14.6", "react-mixin": "^2.0.1", "react-select": "^1.0.0-beta8" }, ... Is there a configuration in webpack I could use something call externals? Not fully sure what that means but a comment said to use:
externals: { 'react': 'React', 'react-dom': 'ReactDOM' } 
932
Use the preventDefault() method on the event object to prevent a page refresh on form submit in React, e.g. event. preventDefault() . The preventDefault method prevents the browser from issuing the default action which in the case of a form submission is to refresh the page.
So the simple solution to the You might have more than one copy of React in the same app error is to add rules into the bundler's config (webpack discussed here but similar approaches are available for other bundlers such as Snowpack, rollup. js or Parcel).
There are a collection of methods that you can employ to add multiple pages in React, but you should first understand that this isn't something that's built into the native library. Instead, we're going to need to use a purpose built package to fulfill the goal of creating multiple pages.
Since you use webpack, you can add an alias for loading react, like this:
// In webpack.config.js resolve: { alias: { react: path.resolve('node_modules/react'), }, }, This prevented the addComponentAsRefTo(...) error and made our build succeed again. However, for some reason, the testing build failed only on our CI environment as it could not resolve the node_modules/react path. I think it's unlikely that you will encounter this particular problem, though.
160
Something that worked for me was:
Uninstall all globally installed packages related to react (create-react-app, react-native, react and so on)
then: rm -rf node_modules
then: use npm install instead of yarn install
considering an App created with crate-react-app and ejected
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
