Skip to content

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

@imjared

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions