Skip to content

React hooks composition fail when packaging into different entries #15605

@lavcraft

Description

@lavcraft

Bug report

What is the current behavior?

React hook useContext(Context) doesn't work when call from another hook from different entry

For example:

  1. I have useHook1 and useHook2. useHook2 call useHook1 inside
  2. Configure webpack with two entries - /src/usr-hook1 and /src/usr-hook2` for some reason
  3. Import in main application and use my hooks like this
const Component: React.FC = () => {
    const devices = useHook1();
    const call = useHook2();
    return null
}
export withHook1(withHook2(Component));

Result:

  1. useHook1 - return right value in Component
  2. useHook1 inside useHook2 return undefined <-- problem here

If the current behavior is a bug, please provide the steps to reproduce.
Reproducible example - react-hooks-composition-in-webpack-entry-problem-example

  1. Clone project
  2. npm i
  3. npm run all:start or npm run sdk:dev and then npm run ui:dev in different terminal
  4. open http://localhost:3000 and see console logs

What is the expected behavior?
useHook1 return right value inside useHook2. (In example project names is different, follow code)

Other relevant information:
webpack version: 4.7.0
Node.js version: 16
Operating System: OSX/Windows 11 WSL Ubuntu
Additional tools: next.js 12.1.3

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