What does ‘Only a ReactOwner can have refs.’ mean?

by

This is FYI for people using react and redux-devtools who are getting OP’s message. Your structure looks like

project
  client
  node_modules
    react
    redux-devtools
      node_modules
        react

The code in client will require the first react module; that in redux-devtools will require the other react. The react module keeps state and assumes it has all the state.

You get the OP’s message because your state is split between the 2 react modules. This situation is what I believe @asbjornenge refers to.

I was bundling the client code with webpack, so I used that to handle the issue. You can force all require and import to always use the first react by adding the following to webpack.config.js

module.exports = {
  ...
  resolve: {
    alias: {
      'react': path.join(__dirname, 'node_modules', 'react')
    },
    extensions: ['', '.js']
  },
  ...
);

I have not looked into what I would need to do if the situation occurred with unbundled code running on node.

More Related Contents:

  1. We simply cannot write “ in ReactJS?
  2. Dynamic tag name in React JSX
  3. What are React controlled components and uncontrolled components?
  4. Clear and reset form input fields
  5. How to resolve “Cannot use import statement outside a module” in jest
  6. Hide keyboard in react-native
  7. When giving unique keys to components, is it okay to use Math.random() for generating those keys?
  8. How to import and export components using React + ES6 + webpack?
  9. Should flux stores, or actions (or both) touch external services?
  10. React-Router open Link in new tab
  11. Redux: Why is avoiding mutations such a fundamental part of using it?
  12. React Router not working with Github Pages
  13. Default property value in React component using TypeScript
  14. Can getDerivedStateFromProps be used as an alternative to componentWillReceiveProps
  15. React Router 4 Nested Routes not rendering
  16. React passing parameter via onclick event using ES6 syntax
  17. React fetch data in server before render
  18. ReactJS difference between stateful and stateless
  19. Why useEffect doesn’t run on window.location.pathname changes?
  20. Call child component method from parent in react
  21. How to enable file upload on React’s Material UI simple input?
  22. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  23. React 16 warning “warning.js:36 Warning: Did not expect server HTML to contain a in .”
  24. How to bundle a React app to a subdirectory on a server?
  25. How to test Async Storage with Jest?
  26. Children won’t render when using a layout in ReactJS
  27. create react app not picking up .env files?
  28. How do I window removeEventListener using React useEffect
  29. React Hook useEffect has a missing dependency: ‘list’
  30. Show/Hide components in ReactJS

Leave a Comment