Documentation for webpack5

[kodai3]

Using with Next.js with webpack 5 enabled, I noticed as of webpack5 we cannot configure polyfill for fs with this.

ref: https://webpack.js.org/configuration/node/

I think with webpack5 we should do like this.

// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    // Fixes packages that depend on fs/module module
    if (!isServer) {
      config.resolve = {
        fallback: {
          fs: 'empty', 
          module: 'empty'
        },
      }
    }

    return config
  },
}

I thought adding <details> section for this would be great.

Thank you for great tools and examples!

[ben-rogerson]

Thanks for sharing this info and for the fix too.
I've updated the emotion + styled-components examples with this fix

Feel free to let me know if there’s anything I’ve missed. cheers 👍

[rifat-dhrubo]

I just tried to use the webpack5 configuration and were getting errors. I think new configuration would look something like this:

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
    return config;
  },
}

reference: vercel/next.js#7755 (comment)

edit: Using this config I could get the dev server running. With the previous one webpack could not complie.

[outerlook]

@HellBlazer616, I could get dev server running with this too. But have you been able to compile the production build?
I've got this error:
ModuleNotFoundError: Module not found: Error: Can't resolve 'module' in 'project_path\node_modules\import-fresh\node_modules\resolve-from'
I've tried also tweaking module to 'empty', both to empty and both to false.

Has anyone been struggling with that too?

[rifat-dhrubo]

@outerlook With the config I provided I am able to compile for production. But that site is mostly for internal use and all the data is fetched client side. So, I am not sure if its going to compile for all builds. with SSR, SSG or ISR. That's why we are still on webpack 4 on our main site. Maybe the module will be false like the "fs".

But don't quote me on that. I absolutely know nothing about webpack.

[ben-rogerson]

Hey guys, I switched to webpack5 in the next-emotion example and each of the modes: dev/start/build/export ran without an issue.

Here's the config I used:

// next.config.js
module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config) => {
    config.resolve.fallback = {
      fs: false,
      module: false,
    }

    return config
  },
}

Related storybookjs/storybook#4082 (comment)