Next.js: Dynamic imports get bundle with reactdom

[quentin-sommer]

I'm using the new
const DynGmp = dynamic(import('some-react-comp')) feature and by running webpack bundle analyzer I noticed that react-dom.min.js gets bundled with some-react-comp. adding import ReactDom from 'react-dom on my page component fixed it.

Am I doing something wrong? Should I always explicitly import react-dom ?

[arunoda]

That's weird. Can I have a sample app to play with?
That'd be pretty helpful for me to find and fix this.

[quentin-sommer]

I've got more insight on the problems:

It occurs when a Component imports react-dom. However the precise component that is causing this problem in my app doesn't cause any problems in a sample project empty I made trying to reproduce

[arunoda]

Interesting.

How many pages you've in your app?
In how many pages you are using that component?
Is it only happening with dynamic components (I mean does it happens when you directly import it and use it)?
What's the component?

[quentin-sommer]

I've got 9 pages and I'm using it in 3 of them, it also happens when I directly import it.

Component is https://github.com/jasonslyvia/react-lazyload.

I'm observing the same thing with https://github.com/istarkov/google-map-react

[quentin-sommer]

By analyzing the webpack results here https://webpack.github.io/analyse I saw that react-dom is present in the main.js chunk and in the 3 chunks using the component causing the problem.

All of these chunks have commons as parents, is it normal that react-dom isn't located in commons but in main.js ?

On my test case (which doesn't reproduce the problem) react-dom is packaged in commons bundle

[quentin-sommer]

after disabling all the dynamics imports and investigating each commits the problem arises when I have more than 8 pages (7 pages and 1 _error.js exactly). Could this be related to a max bundle size allowed by next?
@arunoda

[quentin-sommer]

I'm still running into this issue, any input?

[rauchg]

Great catch @quentin-sommer. We are on it

[arunoda]

@quentin-sommer could you verify is this only production deployment.
In the dev mode, it's okay to be it like that because we don't properly use code splitting in that.

But in production it should work as it is.
In production I mean, next build

[quentin-sommer]

Hi @rauchg & @arunoda ,

I did get this running next build && webpack-bundle-analyzer .next/stats.json (with local installations of next and webpack-bundle-analyze)

Okay bare with me because this might be confusing:

I had this issue with 8 pages and 1 _error override. (so 9 pages if you count the _error.js and 10 with the default _document.js)
I added a new page, so for a grand total of 11, and it fixed my problem.

before: http://imgur.com/q3zCsjp
after: http://imgur.com/NHowLHZ

I intensively use a google-map library which directly imports react-dom, I use it in 4 pages including the last page (the one that "fixed" the problem).

I'm not experienced enough with your internals or webpack ones to solve this on my own, I can give it to you the stats.json of the two builds I've screenshotted for analysis here https://webpack.github.io/analyse if it helps

[arunoda]

@quentin-sommer What we need is a sample app. Is it possible for your wrap a demo app with this case.
So, that helps me to fix this quickly.

[quentin-sommer]

I couldn't manage to reproduce it. I think it has to do with some heuristics from Webpack deciding in which chunk each module should go depending on the dependency tree and the bundle size.

Since it fixed itself and is so specific I'm going to close this. Feel free to re-open or to open another issue if you still want to address this!