Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
1 task done
songhobby opened this issue Jan 17, 2023 · 4 comments
Open
1 task done

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

songhobby opened this issue Jan 17, 2023 · 4 comments
Labels
template: bug A user has filled out the bug report template. Issue needs triaging

Comments

@songhobby
Copy link

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
@songhobby songhobby added the template: bug A user has filled out the bug report template. Issue needs triaging label Jan 17, 2023
@kachkaev
Copy link
Contributor

kachkaev commented Jan 17, 2023 •
edited

Duplicate of / Related to #44083?

@Fredkiss3
Copy link

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

@songhobby
Copy link
Author

songhobby commented Jan 17, 2023 •
edited

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
Copy link
Author

songhobby commented Jan 17, 2023 •
edited

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
template: bug A user has filled out the bug report template. Issue needs triaging
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kachkaev @songhobby @Fredkiss3