How do I use React hooks in my component library?

Question

I'm currently creating a component library which is included in a Nextjs project via NPM link and having a hard time getting it to consistently load without errors. The latest one is

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

This is a Typescript component, but as far as I can tell, what I've done is okay but it's just not playing sport. Here's the code:

        import React, { useEffect } from "react";
        import { FlagIcon } from "react-flag-kit";

        const LanguageSwitcher = () => {
            useEffect(() => {
                alert('Yo!');
            })
            return (
                <div className="w-full justify-end">
                    <button>
                        <div className="flex items-center">
                            <FlagIcon code="GB" /> <span className="block ml-2">English</span>
                        </div>
                    </button>
                </div>
            )
        }

        export default LanguageSwitcher

This is then being imported into another component in the library and then imported into the Nextjs page. Which is where the error is showing up.

I'm not sure if it's a webpack or typescript compiling issue, tried all the different targets I can think of, tried googling all sorts of things but nothing seems relevant to my situation. It might not even be a React issue but one with Typescript and Webpack, but my exposure to those is very new.

My webpack config:

        var path = require('path');
        module.exports = {
          entry: './src/index.ts',
          devtool: "source-map",
          output: {
            path: path.resolve(__dirname, 'build'),
            filename: 'index.js',
            libraryTarget: 'commonjs2'
          },
          module: {
            rules: [
              {
                test: /\.ts(x?)$/,
                use: 'ts-loader',
                exclude: /node_modules/,
              },
              {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
              }
            ]
          },
          resolve: {
            extensions: [ '.tsx', '.ts', '.js' ],
          }
        };

My tsconfig.json


    {
      "compilerOptions": {
        "outDir": "build",
        "module": "esnext",
        "target": "es6",
        "lib": ["es6", "dom", "es2016", "es2017"],
        "sourceMap": true,
        "allowJs": false,
        "jsx": "react",
        "declaration": true,
        "moduleResolution": "node",
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "allowSyntheticDefaultImports": true
      },
      "include": ["src"],
      "exclude": ["node_modules", "build"]
    }

Any pointers or help would be really appreciated!

I also tried reverting everything back to vanilla JS and the problem persists, so I think it might be webpack related?

Edit

Here is my full package.json file and also what Nextjs has

{
  "name": "some/package",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.js",
  "scripts": {
    "test": "jest",
    "start": "webpack --watch --mode=development",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "16.10.2",
    "webpack": "^4.41.1"
  },
  "devDependencies": {
    // ...
    "@types/react": "^16.9.5",
    "@types/react-dom": "^16.9.1",
    "react": "16.10.2",
    "react-dom": "^16.10.2",
    "ts-loader": "^6.2.0",
    "typescript": "^3.6.4",
    "webpack-cli": "^3.3.9"
  }
}

    "react": "16.10.2",
    "react-dom": "16.10.2"

It's not typescript or webpack, its react talking about wrong hook usage — Medet Tleukabiluly, Oct 14 '19 at 19:47
maybe this could help https://stackoverflow.com/questions/58365151/hooks-error-invalid-hook-call-using-nextjs-or-reactjs-on-windows — elbraulio, Oct 14 '19 at 20:31
Thanks for the link, although this is on Mac so I don't think it applies :/ — Alec Ritson, Oct 15 '19 at 08:01
I believe so, I've posted my package.json file and the relevant part that Nextjs has — Alec Ritson, Oct 15 '19 at 08:20
Does this answer your question? [React hooks in react library giving Invalid hook call error](https://stackoverflow.com/questions/56021112/react-hooks-in-react-library-giving-invalid-hook-call-error) — kas, May 27 '20 at 02:14
Duplicate of this question: https://stackoverflow.com/questions/56021112/react-hooks-in-react-library-giving-invalid-hook-call-error, though the answer on this web page is better (more concise) in my opinion. — kas, May 27 '20 at 02:15

score 7 · Accepted Answer · answered Oct 29 '19 at 17:03

7

Turns out this was due to issues with the symlinked react in the component library

https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

Fixed by running the steps in the link:

npm link ../myapp/node_modules/react // Run within the component library

answered Oct 29 '19 at 17:03

Alec Ritson

392
1
13

This fixed my issue! Thanks! – Esteban Borai May 17 '20 at 19:27

score 0 · Answer 2 · answered Mar 22 '21 at 16:24

Was facing the same issue. However, the component library is not owned by me, hence had to things out using this dependency resolution by 'Yarn'

This was my initial dependency tree

project
|- componentLibrary
|  |- react@16.10
|  |- react-dom@16.10
|- react@17.0.1
|- react-dom@17.0.1

added the following snippet in my package.json

"resolutions": {
  "componentLibrary/react": "17.0.1",
  "componentLibrary/react-dom": "17.0.1"
},

which resolved my dependencies to the project's react and react-dom.

How do I use React hooks in my component library?

2 Answers2