Webpack SSR bundle differs from client-side bundle using module replacement

[wilmervanheerde]

Describe the bug

Using a module replacement plugin, similar to Webpack's NormalModuleReplacementPlugin, the replaced modules appear only in the client-side bundle and not in the server-side bundle.

This causes the application to display wrong components on the SSR output which then gets replaced when client-side JavaScript takes over.

• Webpack plugin used is @deity/normal-module-override-webpack-plugin

Webpack config:

const NormalModuleOverridePlugin = require("@deity/normal-module-override-webpack-plugin");

module.exports = {
  webpack: (config) => {
    config.plugins.push(
      new NormalModuleOverridePlugin({
        "package/path/to/component": "src/custom/component",
      })
    );

    return config;
  },
};

Expected behavior

Replaced modules should appear in both bundles so the SSR output is rendered correctly.

System information

• OS: Windows 10, Ubuntu 20.04
• Version of Next.js: 9.3.6
• Version of Node.js: 12.16.3

[timneutkens]

Not sure what you're trying to achieve exactly but node_modules are not passed through webpack for the server-side.

[steef17]

Why is it not happening for server-side while it is happening for client-side?

[timneutkens]

Because it'd approximately takes 2x the current build time for no benefit in most applications. client-side JS has to be bundled otherwise it can't be sent to the browser.

[wilmervanheerde]

Is there a way to include specific packages in the server-side bundle? We're kind of dependent on this

[wilmervanheerde]

Hmm, is there a way to include them? Package X exports component Y, with the replacement plugin we want to replace Y with our own component. Component Y is being referenced by other components in package X and those references are updated with this plugin.

[wilmervanheerde]

We fixed it by modifying Webpack externals configuration :)

[olitaylor]

@wilmervanheerde I am having a similar issue, where we swap the module using NormalModuleOverridePlugin. The module we swap is our component library. The server side bundle is missing the node module we swapped. How did you use webpack externals to fix this?

[desmap]

Not sure if this is related but I try to get the shim of type-graphql-decorated classes to Next.js with:

 webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
   config.plugins.push(
     new webpack.NormalModuleReplacementPlugin(/type-graphql$/, resource => {
       resource.request = resource.request.replace(
         /type-graphql/,
         'type-graphql/dist/browser-shim.js',
       )
       console.log(resource)
     }),
   )

And I get errors coming from the full type-graphql and not from the shim. Is it because it's rendered on the server with the full lib? How could webpack externals help here?

[RishikeshDarandale]

Anything you found on this one?