How to fix the Webpack polyfill error while upgrading laravel mix to 6.0.49

The upgrade guide to laravel-mix to 6 is available in an official document. But you may encounter compiling errors related to webpack couldn't find standard libraries like fs, HTTP, HTTPS, URL etc.

Webpack version less than 5 is used to polyfill for node.js core modules by default but not in webpack 5 and newer. If your setup/packages need these polyfills, you will encounter can't resolve errors.

In order to successfully compile you need to provide those polyfills to the webpack config. Below I have included frequently used polyfills library setup steps and configuration codes.

1 Install necessary npm packages as your need

npm install --dev browserify-zlib
npm install --dev https-browserify
npm install --dev node-polyfill-webpack-plugin
npm install --dev stream-browserify
npm install --dev stream-http
npm install --dev resolve-url-loader

2 Update your webpack config in webpack.config.js file

// webpack.config.js

resolve: {
        fallback: {
            stream: require.resolve("stream-browserify"),
            http: require.resolve("stream-http"),
            https: require.resolve("https-browserify"),
            zlib: require.resolve("browserify-zlib"),
            url: require.resolve("url"),
        },
        preferRelative: false,
...
}
...

    plugins: [
       ....
        new NodePolyfillPlugin(),
        new webpack.ProvidePlugin({
            http: "stream-http",
            https: "https-browserify",
        }),
...
    ],
....

We found noticeable speed while compiling compare to webpack < 5 versions. However, we are on the way to migrating laravel mix to Vite to boost our frontend development.

Since Vite is only available from laravel 9. Soon I will post laravel-mix to Vite migration for any Laravel version soon.

Till then sayonara.