[NEXT-1221] Dynamic import of module contaning next/image component results in Error: Cannot read properties of null (reading 'useContext') #49382
Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
Binaries:
Node: 18.14.2
npm: 9.5.0
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.4.1
eslint-config-next: 13.4.1
react: 18.2.0
react-dom: 18.2.0Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true), Image optimization (next/image, next/legacy/image)
Link to the code that reproduces this issue
https://github.com/michaeloliverx/next.js-mre
To Reproduce
Load up MRE example, navigate to http://localhost:3000/blog/module-with-image and see the following error:
Also navigate to http://localhost:3000/blog/module-without-image to see it work correctly when the <Image/> component is removed.
Describe the Bug
The bug only seems to appear when BOTH the following are true
- Dynamic import of a module with variables e.g.
import(``../path/to/${module}.tsx``) - Usage of the
Imagecomponent fromnext/image
Expected Behavior
I want the page to load correctly without any errors.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response