meteor / meteor/meteor

[Meteor 3] React regression: Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

Open
#13,147 13 comments 0 reactions 0 assignees View on GitHub
idle
Dominant language
JavaScript
Stars
44.8k
Forks
5.2k
Avg merge
3d 12h
Merged PRs (30d)
25

Description

We created a repo to reproduce this issue > https://github.com/acemtp/meteor3reactbug

Using React components inside a meteor package in a meteor 3 project will result in a React warning about multiple instances of React in the same app. It's a regression since it works fine with meteor 2.

# How to reproduce

* clone this repo: https://github.com/acemtp/meteor3reactbug

# Test with meteor 2 (working as expected)

* open a terminal and run the following commands:

```bash
./bin/run2
```

* open a browser and go to `http://localhost:3000/`

* you should see a grey line where you can click and enter some text

* open the developer console and you should see nothing

# Test with meteor 3 (not working)

* open a terminal and run the following commands:

```bash
./bin/run3
```

* open a browser and go to `http://localhost:3000/`

* you should not see the grey line

* open the developer console and you should see the following output:

```
Warning: 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
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
```

You'll see that there's 2 instances of `react-dom` in the projet if you run the following command:

```bash
❯ find . -name react-dom
./.meteor/local/isopacks/sakod_core/npm/node_modules/react-dom
./.meteor/local/build/programs/server/npm/node_modules/meteor/sakod_core/node_modules/react-dom
./.meteor/local/build/programs/server/npm/node_modules/react-dom

--> ./node_modules/react-dom
--> ./packages/sakod-core/.npm/package/node_modules/react-dom
````

One in the `node_modules` and one in the meteor package and it explains the React warning (You might have more than one copy of React in the same app).

Doing the same test with meteor 2 will work as expected and `find . -name react-dom` will only return the `node_modules` instance.

I really have no idea why this is happening, is it a changes in the meteor building system or in npm?

Contributor guide

Open the contributing guide

Research direction

Start with the reproduction repository linked in the issue, running ./bin/run2 and ./bin/run3 and comparing the generated node_modules paths. Inspect the Meteor package and application build output, especially the listed react-dom locations. Done means the Meteor 3 reproduction renders the component without the invalid hook warning or duplicate React instance.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js, react
Domain
build-system, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.