Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React library(lib mode) doesn't work with Vite: Invalid hook call

See original GitHub issue

Read the docs.
Use Vite >=2.0. (1.x is no longer supported)
If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

Similar to #1401, when using Vite 2.0 in library mode with React, the bundle generated throws “Invalid hook call” when imported in the browser.

Reproduction

I’ve created a repo with a simple app to demonstrate the issue: https://github.com/thelinuxlich/vite-react-lib

System Info

vite version: 2.0.0-beta.31
Operating System: Ubuntu 20.04
Node version: 12.20
Package manager (npm/yarn/pnpm) and version: yarn 1.22.5

Issue Analytics

State:
Created 3 years ago
Comments:9 (3 by maintainers)

Top GitHub Comments

1reaction

thelinuxlichcommented, Jan 19, 2021

Thanks @izznatsir and @yyx990803 and pardon my noobiness in the subject. I updated the repo with the working solution in case someone steps by looking for this answer, I will be using the UMD bundle.

1reaction

yyx990803commented, Jan 19, 2021

I don’t think you are understanding what the format means. The ES distribution has raw import statements to "react" so it’s going to resolve to your local installation of React in node_modules.

If you want to use it with globals you have to build it as UMD or IIFE.

Top Results From Across the Web

reactjs - Vite, NPM, React Component Library Invalid hook call ...

My problem is that now I'm getting the following error when I try to npm link my vite generated distribution with another react...

Invalid Hook Call Warning - React

There are three common reasons you might be seeing it: You might have mismatching versions of React and React DOM. You might be...

Solving React Hooks' invalid hook call warning - Rob Kendal

Building a React project and have the error 'Hooks can only be called inside the body of a function component'? We'll solve the...

Invalid hook call. Hooks can only be called inside the body of ...

Open your terminal in your project's root directory and update the versions of your react and react-dom packages to make sure the versions...

invalid hook call react router | The AI Search Engine You Control

Found a solution: previously I installed react-router-dom directly from macOS terminal and everything worked except for useHistory, however this time I ...