Dynamic import is loading all dependency even it's lazy loaded. Next 7.0.0

[ptdede]

Bug report

Describe the bug

on "next": "^7.0.0", dynamic import is importing ALL of the module that is supposed to lazy loaded. unlike "next": "^6.1.2", the module is correctly loaded on demand.

To Reproduce

import dynamic from "next/dynamic";
const TextSideSlider: any = dynamic(
    import(/* webpackChunkName: 'TextSideSlider' */"./TextSideSlider") as any,
);

this component is used only on route /b. But, on route /a it's already loaded.

Expected behavior

Dynamic imported module loaded when it's needed. like on next 6.1.2.

Screenshots

"next": "^6.1.2"
on route /a
TextSideSlider component is not loaded.

on route /b
TextSideSlider component is loaded correctly on demand.

"next": "^7.0.0",
on route /a
TextSideSlider component is already loaded

on route /b
nothing changed

System information

• OS: macOS
• Browser chrome
• Version of Next.js: 6.1.2 & 7.0.0

[tusbar]

Probably dupe of #5213

[ptdede]

@tusbar Yes.. Maybe it's related?
I tried to rm -rf node_modules/.cache, rm -rf .next, then npm run build. but the all dynamic module is still loaded initially in my project.

using your repo it's correctly loaded the dynamic component on demand when i do rm -rf node_modules/.cache. and remove Message component inside page/index.js
the message component chunk only loaded on /about page. Now i am shocked. hahaha. how can?

[dnakov]

This worked for me:

import dynamic from "next/dynamic";
const TextSideSlider: any = dynamic(
    () => import(/* webpackChunkName: 'TextSideSlider' */"./TextSideSlider") as any,
);

[ptdede]

@dnakov well i just try with @tusbar repo. I confirm it works. hahaha. But not in my case. I still try to figure it out whats wrong with my code. comeback later after found out what's wrong.

[ptdede]

@dnakov Oh wait. i didn't pay attention to your code. you're trying to return anonymous function within dynamic function? my typescript compiler is complaining about that

Argument of type '() => any' is not assignable to parameter of type 'Promise<ComponentType<{}>>'. 
Property 'then' is missing in type '() => any'.

[dnakov]

yeah, sorry, this wasnt typescript-correct. just meant that i put the import in a function so it doesn’t get loaded immediately

[ptdede]

@dnakov no problem, i get your idea. Thanks. 👍

[timneutkens]

#5249 fixes this issue.

[ptdede]

Thanks @timneutkens ! Will try after release

[ptdede]

This works using next 7.0.1-canary.2:
thanks for the fix @timneutkens 👍

const TextSideSlider = dynamic(() => import(/* webpackChunkName: 'TextSideSlider' */ "./TextSideSlider"));

[timneutkens]

@ptdede I've updated your comment to use the recommended syntax 🙌