React hooks composition fail when packaging into different entries

[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

[lavcraft]

May be I‘m doing something wrong and need read some docs. Please help navigate to right articles for improve understanding of the problem. Now I’m really disoriented

[vankop]

I don't think this is webpack problem.. please ask in react issue tracker.

[lavcraft]

@vankop okay. Ask
facebook/react#24230

I guess it's not a problem. I just need configure webpack right. But don't know how now.

I decide to continue in gitter. Is it a right communication channel with community?. Or another one (which) is more suitable channel?

this - https://gitter.im/webpack/webpack?at=624598776b912423205dd681

[vankop]

so maybe you just need to add both entrypoints on the page? ( you need to use dependOn option in this case https://webpack.js.org/configuration/entry-context/#dependencies )

[lavcraft]

@vankop this a problem, because i build a library, not a page. But i already tried dependOn :)

How i do it right inside library?

I try use dependOn. But it crash library loading in ui application

• code with dependOn - https://github.com/lavcraft/react-hooks-composition-in-webpack-entry-problem-example/blob/master/packages/sdk/webpack.config.js#L24
• when add dependOn , my page will crash here - https://github.com/lavcraft/react-hooks-composition-in-webpack-entry-problem-example/blob/master/packages/ui/src/pages/index.tsx#L13 . It happened because useDevices import now import strange structure (webpack chunks with links to esm modules)

I can't finish variant with dependOn because lack of knowledge about how cook it right :) May be you can advice something?

[lavcraft]

For explanation

i have three files

/devices.ts
/contexts.ts
/call.ts

For the output i need one shared file - contexts.js , (because react hook useContext check similarity via reference).
And two separate files devices.js and call.js which reuse contexts.js. But now i have thre independent module - devices.js, call.js, contexts.js :)

[vankop]

but what a reason to create a separate entries? just use your app entrypoint

[lavcraft]

@vankop main reason is libraries and code which not support SSR.

For example:
I can use useDevices hook in this component - https://github.com/lavcraft/react-hooks-composition-in-webpack-entry-problem-example/blob/master/packages/ui/src/pages/index.tsx#L20

But i can't use useCall. useCall depend on libraries who use window as global var. When import from external libraries like this it produce import fail. Component like this, should be decorated with dynamic import (example)

I want to save ability to use some hooks without dynamic imports.