Invariant Violation: Minified React error #321

[lianrenjie]

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

[cindyrise]

when import react hook，Invariant Violation: Minified React error #321；The current used react 16.8.6,chrome 75,

[sagar-gavhane]

Hey, Can you provide code snippet or codesandbox link for reference?

[fizikst]

I make a module module-hook (https://codesandbox.io/s/little-dawn-2sxyo).

To check the functionality of the module using https://github.com/facebook/create-react-app.

If the module contain react-hook (release 1.0.0), return same error.

If the module non contain react-hook (release 1.0.2), return module.

All rules https://reactjs.org/warnings/invalid-hook-call-warning.html are executed.

[ngocketit]

I got the same error over here.

[Dergash]

Hello @lianrenjie, @fizikst, @cindyrise, @ngocketit!

Based on the example that @fizikst provided I believe the problem is that you are indeed have multiple instances of React on your page and the warning invariant=321 is correct about that.

You can see it in your bundled code in your npm package:

The thing is, aside of making React and react-dom peer deependencies in your libraries package.json, you also should mark them as 'externals' when building them with webpack, so webpack would know that react shouldn't be bundled into your library and should be looked in runtime instead.

I made a PR for a @fizikst example which should remove another react copy from bundled js file - I probably mangled it a bit with different library types but error should go away and you may find further reading about it here

peerDependencies section is more like a hint for your published package, saying how to solve your package dependencies when installing it as a library for other app, which version to install and which version should be provided by your other app.
It does not actually handling your js bundle.

[deligent-ant]

i have did as your said, just like . " aside of making React and react-dom peer deependencies in your libraries package.json, you also should mark them as 'externals' when building them with webpack"
but the #321 still exist,who can help me.

"peerDependencies": {
    "antd": "^3.25.0",
    "styled-components": "^4.4.1",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }

 externals: [
    // nodeExternals(),
    {
      react: {
        root: 'React',
        commonjs2: 'react',
        commonjs: 'react',
        amd: 'react'
      },
      'react-dom': {
        root: 'ReactDOM',
        commonjs2: 'react-dom',
        commonjs: 'react-dom',
        amd: 'react-dom'
      }
    }
}

if i don't use useCallback ant useMemo ,it can work,but i need useMemo...

[deligent-ant]

i solute it . what my question is . npm-link
webpack

alias:{
react: path.resolve('./node_modules/react')
  }

[DamengRandom]

There might be another possibe case is we try to write hooks code inside class based component, which will cause this error as well.

[codedart2018]

i have did as your said, just like . " aside of making React and react-dom peer deependencies in your libraries package.json, you also should mark them as 'externals' when building them with webpack"
but the #321 still exist,who can help me.

"peerDependencies": {
    "antd": "^3.25.0",
    "styled-components": "^4.4.1",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }

 externals: [
    // nodeExternals(),
    {
      react: {
        root: 'React',
        commonjs2: 'react',
        commonjs: 'react',
        amd: 'react'
      },
      'react-dom': {
        root: 'ReactDOM',
        commonjs2: 'react-dom',
        commonjs: 'react-dom',
        amd: 'react-dom'
      }
    }
}

if i don't use useCallback ant useMemo ,it can work,but i need useMemo...

thank you

[mqtik]

I had to comment the following code in order to solve the #321 error, similar to development config.

 externals: [
    // nodeExternals(),
    {
      react: {
        root: 'React',
        commonjs2: 'react',
        commonjs: 'react',
        amd: 'react'
      },
      'react-dom': {
        root: 'ReactDOM',
        commonjs2: 'react-dom',
        commonjs: 'react-dom',
        amd: 'react-dom'
      }
    }
}

Now it works when I build with yarn start, but in release build it crashes at startup.
Weird.

[alexander-elgin]

I had the same issue when I used useSelector (from react-redux) in JSX (returned by a render function). The issue was gone when I moved the useSelector to the body of the render function (before the return statement).

[SilvaQ]

I had to comment the following code in order to solve the #321 error, similar to development config.

 externals: [
    // nodeExternals(),
    {
      react: {
        root: 'React',
        commonjs2: 'react',
        commonjs: 'react',
        amd: 'react'
      },
      'react-dom': {
        root: 'ReactDOM',
        commonjs2: 'react-dom',
        commonjs: 'react-dom',
        amd: 'react-dom'
      }
    }
}

Now it works when I build with yarn start, but in release build it crashes at startup.
Weird.

same question。

[mazunind]

As @DamengRandom has suggested, rewriting some components into functional ones solved this for me

[gleiderr]

I am using my package as my-lib: "link: ../ .." while testing. That is why this problem occurred.

What worked for me was the suggestion found in the stackoverflow below:

making my app and library point to the same react (package) location.

Below are the steps I followed :

1. In Your Application:
   a) cd node_modules/react && npm link
   b) cd node_modules/react-dom && npm link

2. In Your Library
   a) npm link react
   b) npm link react-dom

3)Stop your dev-server and do npm start again.

Refer below for more details:
https://stackoverflow.com/questions/56021112/react-hooks-in-react-library-giving-invalid-hook-call-error

[Statfine]

you can move react and react-dom from dependencies to devDependencies in your lib，this can ensure react consistency in project

// package.json
{
  "dependencies": {},
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0"
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
  }
}