Got error when using @hot-loader/react-dom 16.8.6

EdenSun commented 5 years ago

Got below errors when using @hot-loader/react-dom 16.8.6

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

package.json

{
  ...
  "dependencies": {
    "@hot-loader/react-dom": "^16.8.6",
    "axios": "^0.18.0",
    "classnames": "^2.2.5",
    "connected-react-router": "^6.5.2",
    "core-js": "^3.1.4",
    "cross-fetch": "^3.0.4",
    "date-fns": "^1.30.1",
    "font-awesome": "^4.7.0",
    "history": "^4.9.0",
    "jwt-decode": "^2.2.0",
    "moment": "^2.22.1",
    "office-ui-fabric-react": "^7.21.0",
    "qs": "^6.5.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-flexbox-grid": "^2.1.2",
    "react-loadable": "^5.5.0",
    "react-motion": "^0.5.2",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.1",
    "reactstrap": "^8.0.1",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "smoothscroll-polyfill": "^0.4.4"
  },
  "devDependencies": {
    ...

    "react-hot-loader": "^4.0.0",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.1"

    ...
  },
  "scripts": {
    ...
  }
}

I also add alias to webpack config:

alias: {
     'react-dom': '@hot-loader/react-dom'
}

theKashey commented 5 years ago

@EdenSun - sorry, but that's not enough. I have to know when you saw this error (a full error stack), and react-hot-loader version you use. For hooks please use latest version (4.12+), and they are absolutely unsupported below version 4.6

EdenSun commented 5 years ago

@theKashey Thanks for your reply. It works now. I think this issue caused by different version of react-hot-loader in node_modules . I tried to remove node_modules and reinstall the dependences, then it works.

theKashey commented 5 years ago

👍

hot-loader / react-dom

Got error when using @hot-loader/react-dom 16.8.6 #15