[NEXT-1221] Dynamic import of module contaning next/image component results in Error: Cannot read properties of null (reading 'useContext')

[michaeloliverx]

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.0

Which 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 Image component from next/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

_NEXT-1221

[Tineshnehete]

Hi there ,
I also got the same issue with dynamic import and i tried alter methods also.
With dynamic(()=>import()) method if you use the path which have any variable dependency like shown in following snippet it leads to unexpected behavior like module not found or TypeError: Cannot read properties of null (reading 'useContext') .

import(`${path}`) // OR
import(path) // OR
import('strpath' + path)

And the same problem with require() , React.lazy().

but instead of path depending on var and you add explicite path like import('full/path/with/no/var') it works fine.

So for until it fixes we can use a dict to define views and use theme .

const Views = {
comp1: dynamic(()=>import("path/to/comp1")),
comp2: dynamic(()=>import("path/to/comp2")),
}
const MyPage = ({params})=>{
    const Comp = Views[params.view_name];
    return <><Comp /></>
}

[huozhi]

It's fixed by #52795, version after v13.4.11-canary.0 should get rid of this issue!

[github-actions]

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