microbundle: Invalid hook call. Hooks can only be called inside of the body of a function component

I receive the error Invalid hook call. Hooks can only be called inside of the body of a function component when attempting to use my Microbundled module in Create-React-App. Essentially, there are two versions of React. See Dan’s comment.

I ran into this issue previously but was able to solve it by adding --globals react=react1, which felt like a hacky solution. However, I just re-ran yarn install and the issue came back.

Is there a known solution here?

Here’s my module’s package.json file.

{
  "dependencies": {
    "nanoid": "^2.1.8",
    "normalizr": "^3.4.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "styled": "^1.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "eslint": "^6.8.0",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-react-hooks": "^1.7.0",
    "prop-types": "^15.7.2"
  },
  "license": "UNLICENSED",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "name": "tk-ux",
  "peerDependencies": {
    "prop-types": "^15.7.2"
  },
  "repository": "github:pBread/tk-ux.git",
  "scripts": {
    "build": "microbundle build   --alias API=src/Modules/API/index.js,Constants=src/Constants/index.js,Containers=src/Containers/index.js,Modules=src/Modules/index.js,Utilities=src/Utilities/index.js    --globals react=React     --jsx React.createElement",
    "dev": "yarn link && cd example && yarn link 'tk-ux' && yarn start",
    "serve": "microbundle watch   --alias API=src/Modules/API/index.js,Constants=src/Constants/index.js,Containers=src/Containers/index.js,Modules=src/Modules/index.js,Utilities=src/Utilities/index.js    --globals react=React     --jsx React.createElement"
  },
  "source": "./src/index.js",
  "umd:main": "dist/index.umd.js",
  "version": "1.0.0"
}

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 23 (4 by maintainers)

Links to this issue

javascript - TypeError: (0 , _react.useEffect) is not a function - Stack Overflow

Most upvoted comments

I’m also having this issue, tried to use microbundle and it’s including react even though react is a peerDependency

nicholasio on Sep 3, 2020

@mikestopcontinues i understand you perfectly. I made a intentional use of useState at the top level component exported in my package, and as you can see, seems like i can’t use any hook inside the components.

The code:

The error:

wendellpbarreto on Mar 24, 2021

@mikestopcontinues did you find a solution for next.js?

tkumpanenko on Mar 1, 2021

I was also seeing react being bundled even though it was listed in devDependencies and peerDependencies. The solution for me was to add the prop-types package to the peerDependencies

reevesryan on Nov 16, 2020

I think it was a combination of --globals react=React,react-dom=ReactDOM and adding them as peer dependencies. Although, I’m not sure if that was the full fix.

Here’s my working package.json…

{
  "dependencies": {
    "nanoid": "^2.1.8",
    "normalizr": "^3.4.1",
    "prop-types": "^15.7.2",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-react-hooks": "^2.3.0",
    "microbundle": "^0.11.0",
    "prop-types": "^15.7.2"
  },
  "files": ["dist"],
  "license": "UNLICENSED",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "name": "tk-ux",
  "peerDependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3"
  },
  "repository": "github:pBread/tk-ux.git",
  "scripts": {
    "build": "microbundle build     --globals react=React,react-dom=ReactDOM    --jsx React.createElement",
    "dev": "yarn dev:link && cd example && yarn start",
    "dev:link": "yarn link && cd example && yarn link 'tk-ux'",
    "dev:unlink": "yarn unlink",
    "serve": "yarn build --w"
  },
  "source": "./src/index.js",
  "unpkg": "dist/index.umd.js",
  "version": "1.0.0"
}

pBread on Jan 6, 2020

This may be related to yarn link behavior. I was able to resolve the issue (at least temporarily) by unlinking the package in my local environment then re-linking them.

I think this is still an issue that needs some clarification and/or documentation. Can anyone elaborate on best-practices for avoiding conflicts like these? i.e. accidentally creating two versions of a dependency.

pBread on Jan 5, 2020