Next.js: `react-dom/server could not be resolved` in `react-apollo` in Next@5

[vjpr]

ERROR in ./node_modules/.registry.npmjs.org/react-apollo/2.1.0-beta.0/node_modules/react-apollo/renderToStringWithData.js
Module not found: Error: Can't resolve 'react-dom/server' in '/Users/Vaughan/dev-live/vwp/node_modules/.registry.npmjs.org/react-apollo/2.1.0-beta.0/node_modules/react-apollo'
 @ ./node_modules/.registry.npmjs.org/react-apollo/2.1.0-beta.0/node_modules/react-apollo/renderToStringWithData.js 3:15-42
 @ ./node_modules/.registry.npmjs.org/react-apollo/2.1.0-beta.0/node_modules/react-apollo/index.js
 @ ./packages/next-apollo/withData.js
 @ ./pages/map.js
 @ multi ./pages/map.js

See https://github.com/zeit/next.js/blob/f9b52cfcb6cba5f2af93caf3cc8bc3636571323f/server/build/webpack.js#L155

This aliasing seems to prevent require sub-paths.

PS. I am using pnpm. Maybe this could be related...

Workaround

Add this to your next.config.js:

delete config.resolve.alias['react-dom']

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Your Environment

| Tech | Version |
|---------|---------|
| next | 5 |
| node | 8 |
| OS | macOS |
| browser | Chrome |
| etc | |

[mgiraldo]

i am also having issues with react-dom/server not being found after i upgraded as well as other random issues that were not occurring before :

i want to upgrade my next 4 project but things are breaking in a weird way (erratically… sometimes it works sometimes it doesnt)

[mgiraldo]

for example, im using hot reloading for and changing a css file now throws: Module build failed: Error: ENOENT: no such file or directory, open /path/to/file.css.json. i've been using a file loader in next.config.js to transform css before passing to postcss. this stopped working now in version 5 :

[vjpr]

@mgiraldo See my workaround.

What you could try is printing the final webpack config from your Next@4 app and then comparing to Next@5.

[pantharshit00]

I am also having same issue /cc @arunoda

It have in this live stream https://www.youtube.com/watch?v=yCDLVpyQ5NI

Got it working using that delete work around

[arunoda]

@pantharshit00 @vjpr
I can see why this is happening.
I'll have a look.

[arunoda]

@vjpr could you check with bundle-analyzer and see react-dom/server used in the client side or not.
If so, try to remove it with our custom webpack config.

[pantharshit00]

@arunoda This fixes this in our project.

https://github.com/fus-marcom/franciscan-react/blob/next5/next.config.js

Here is our babel plugin module resolver

https://github.com/fus-marcom/franciscan-react/blob/e7d694a61b8989d360141dc916a32beec6c6789e/.babelrc#L21

[arunoda]

@pantharshit00 thanks for the input.
We didn't realized react-dom/server is gonna used inside the client.
We may want to add an alias for that.
(For the production build, we use React's minified production bundle)

[schoenwaldnils]

I had the same issue. Made it work with using this:

// working
import { server } from 'react-dom';

server.renderToString(<Component />);

instead of:

// not working
import { renderToString } from 'react-dom/server';

renderToString(<Component />);

Edit:
Which doesn't work on next export

[arunoda]

Hey, this fix exists in https://github.com/zeit/next.js/releases/tag/5.0.1-canary.2

[kyle-mccarthy]

It took me a while to figure it out, so in case anyone as has the same problem doing delete config.resolve.alias['react-dom'] will break the dead code compilation of your production build but the fix from @arunoda in 5.0.1-canary.2 provides a proper fix without the breaking the compilation.