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

[acemtp]

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:

./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:

./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:

❯ 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?

[denihs]

I could reproduce this as your description suggests. The strange part is that we didn't have any more reports on this... I did some debugging but I couldn't find the root cause of this. I'm going to have another go at it later.

[paulincai]

@acemtp how about you take it down as a local NPM package and try one of 2 things:

1. Delete the peerDependencies (assuming you already have React in your project)
2. Update the peerDependencies to take from React 18 instead of >=17
   https://github.com/facebook/lexical/blob/main/packages/lexical-react/package.json

[acemtp]

@paulincai i never did meteor npm package so not sure how to take it down as a local npm package.

this is a minimal reproduction repo to make it easier to debug. But in our project, the sakod:core meteor package contains tons of meteor stuffs that we want to keep in a meteor package.

[paulincai]

ok, I think your problem could be related to this: facebook/lexical#5996 and not related to Meteor bundling tools.

This explains how to depend, in a Meteor package, on a local NPM package: meteor/guide#682
To create a local NPM package, just copy an NPM package in a local folder in your project and reference it in either the global package.json of your project "@pampam/packagename": "file:folderLocation/FolderOfThePackageWhichContainsPackageDotJson", or in a Meteor package.

[acemtp]

Thanks you for your reply.

If it's a lexical issue, since we use the same version, why it works with Meteor 2 and not Meteor 3? Could it be due to a change with node version or node modules management?