Dynamically imported client component with variable name returns error in dev but works fine in prod

[songhobby]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:08:47 PST 2022; root:xnu-8792.61.2~4/RELEASE_X86_64
Binaries:
Node: 16.17.0
npm: 8.15.0
Yarn: 1.22.19
pnpm: N/A
Relevant packages:
next: 13.1.2
eslint-config-next: 13.1.2
react: 18.2.0
react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Dynamic imports (next/dynamic)

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-zxfkvg?file=app/page.tsx

To Reproduce

yarn dev

Describe the Bug

When dynamically importing a client component with variable name which uses React context, next returns error on dev but works fine on prod. Note: dynamic import with static name works in both environment.

Expected Behavior

yarn dev errors and the error says TypeError: Cannot read properties of null (reading 'useContext')
yarn build && yarn start works fine.

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Vercel

[kachkaev]

Duplicate of / Related to #44083?

[Fredkiss3]

Sorry if my question is out of context, but you can use next/dynamic for this right ?

[songhobby]

Sorry if my question is out of context, but you can use next/dynamic for this right ?

We need a programmatic way to load a component of variable name and it is not officially supported per next note:

Note: In import('path/to/component'), the path must be explicitly written. It can't be a template string nor a variable. Furthermore the import() has to be inside the dynamic() call for Next.js to be able to match webpack bundles / module ids to the specific dynamic() call and preload them before rendering. dynamic() can't be used inside of React rendering as it needs to be marked in the top level of the module for preloading to work, similar to React.lazy.

[songhobby]

Duplicate of / Related to #44083?

I don't think hey are caused by the same problem as it has nothing to do with minimized react error
Also the production build works like a breeze.

[huozhi]

confirmed it's the same issue as #49382 , will close this for now and track there

[huozhi]

This problem is fixed in next@13.4.5-canary.9

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.