Code using React hooks fails if components are imported from parent directory

[imjared]

#3272 🐛 bug report

This is the same issue that was reported in #2709 but OP there closed it and suggested I create a new issue. So here we are.

🎛 Configuration (.babelrc, package.json, cli command)

See repo here:
https://github.com/imjared/parcel-js-react-hooks

🤔 Expected Behavior

Components with hooks should build and run as expected.

😯 Current Behavior

React hooks fail with the following error:

react.development.js:1590 Uncaught Error: 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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1590)
    at useState (react.development.js:1618)
    at HelloWord (TestComponent.js:29)
    at renderWithHooks (react-dom.development.js:16241)
    at mountIndeterminateComponent (react-dom.development.js:18775)
    at beginWork$1 (react-dom.development.js:20137)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25738)

🔦 Context

We're operating in a monorepo. Our "bundler" (aka Parcel) lives alongside a bunch of package directories. Each directory can contain components that we want to bundle and deploy for use on a WordPress site. Components using the older class-based syntax load as expected. Components with hooks fail.

💻 Code Sample

https://github.com/imjared/parcel-js-react-hooks

🌍 Your Environment

Software	Version(s)
Parcel	See repo
Node	10.13.0
npm/Yarn	1.19.1
Operating System	Mojave

[rtsao]

This is symptomatic of having multiple copies of React.

Based on the structure of that repo, there will be two copies of React installed, one in build-dir/node_modules/react and the other in other-dir/node_modules/react.

When imported in build-dir/components/SameDirTestComponent/index.jsx, react will resolve to build-dir/node_modules/react and when imported in other-dir/components/OtherDirTestComponent/index.jsx, react will resolve to other-dir/node_modules/react.

I suppose Parcel should de-dupe identical dependencies? But strictly according to the node_module resolution algorithm, the existing behavior is correct.

Hoisting/de-duping the react dependency would solve this problem (possibly a use case for yarn workspaces).

[imjared]

@rtsao That makes sense. We're using yarn workspaces in our repo but had our bundler sitting above the packages directory for some reason and were installing deps into that folder that weren't hoisted to the workspace root. I had worked through errors 1 and 2 in the React error message but didn't totally think through the third.

I think I agree that this is expected behavior and I'm ok marking this as closed.

Thanks for your thoughtful reply.