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

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

Table of contents

No heading

No headings in the article.

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.