[Question/Possible Issue] - Mix 6 & Webpack 5 polyfill issues.

[surgiie]

Forgive me if im missing something obvious here, but Im having trouble getting this to work with laravel mix 6, specifically have 6.0.19 defined in my package.json.

When I register this with mix and call mix.svelte(), i get a bunch of webpack errors that look like this:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

The screenshot in this issue is a more thorough example of output and exactly what im experiencing : https://github.com/webpack/webpack/issues/11868

This is due to the changes in webpack 5 not including polyfills for core modules

Ive tried mix.options({ legacyNodePolyfills: true }); as suggested by laravel mix docs and other issues but still no working build/compile by mix.

These errors suggest adding polyfills in webpack config but im not entirely sure what all modules require polyfills or how to go about determining modules that indicate a polyfill is required so ive just been putting false on module resolve.fallback in my webpack.mix.js file and seeing if the issues disappear

Here is my current webpack.mix.js, that has reduced to the least amount of errors:

const mix = require('laravel-mix')

require('laravel-mix-svelte')

mix.js('resources/js/app.js', 'public/js')
    .postCss("resources/css/app.css", "public/css", [
        require("tailwindcss"),
    ])
    .webpackConfig({
        resolve:{
            fallback:{
                fs: false,
                crypto: false,
                http: false,
                constants: false,
                https: false,
                vm: false,
                os: false,
                stream: false,
                path: require.resolve('path-browserify')
            }
        },
    })
    .svelte({
        compilerOptions:{
            dev: !mix.inProduction()
        }
    })
    .version();

Hoping someone has hit this and found a solution? I believe there is some configuration or polyfill required as in addition to the errors i mentioned above, it seems like modules are failing to resolve:

ERROR in ./node_modules/laravel-mix/src/components/BrowserSync.js 25:32-70
Module not found: Error: Can't resolve 'browser-sync-webpack-plugin' in '/app/node_modules/laravel-mix/src/components'

ERROR in ./node_modules/laravel-mix/src/components/React.js 50:35-82
Module not found: Error: Can't resolve '@pmmmwh/react-refresh-webpack-plugin' in '/app/node_modules/laravel-mix/src/components'

ERROR in ./node_modules/laravel-mix/src/components/React.js 60:15-53
Module not found: Error: Can't resolve 'react-refresh/babel' in '/app/node_modules/laravel-mix/src/components'

ERROR in ./node_modules/laravel-mix/src/components/React.js 80:15-31
Module not found: Error: Can't resolve 'react' in '/app/node_modules/laravel-mix/src/components'
Did you mean './react'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

ERROR in ./node_modules/laravel-mix/src/components/Vue.js 114:34-55
Module not found: Error: Can't resolve 'vue-loader' in '/app/node_modules/laravel-mix/src/components'

ERROR in ./node_modules/laravel-mix/src/webpackPlugins/BuildOutputPlugin.js 5:17-36
Module not found: Error: Can't resolve 'readline' in '/app/node_modules/laravel-mix/src/webpackPlugins'

ERROR in ./node_modules/mini-css-extract-plugin/dist/utils.js 11:37-54
Module not found: Error: Can't resolve 'module' in '/app/node_modules/mini-css-extract-plugin/dist'

ERROR in ./node_modules/node-notifier/lib/checkGrowl.js 1:10-24
Module not found: Error: Can't resolve 'net' in '/app/node_modules/node-notifier/lib'

ERROR in ./node_modules/node-notifier/lib/utils.js 2:9-33
Module not found: Error: Can't resolve 'child_process' in '/app/node_modules/node-notifier/lib'

ERROR in ./node_modules/node-notifier/lib/utils.js 9:10-24
Module not found: Error: Can't resolve 'net' in '/app/node_modules/node-notifier/lib'

ERROR in ./node_modules/postcss-load-config/node_modules/resolve-from/index.js 3:15-32
Module not found: Error: Can't resolve 'module' in '/app/node_modules/postcss-load-config/node_modules/resolve-from'

ERROR in ./node_modules/resolve-from/index.js 3:15-32
Module not found: Error: Can't resolve 'module' in '/app/node_modules/resolve-from'

ERROR in ./node_modules/yaml/browser/dist/warnings-df54cb69.js 461:19-26
Module not found: Error: Can't resolve 'process/browser' in '/app/node_modules/yaml/browser/dist'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

[morpheus7CS]

Hey @surgiie,

sorry for the super late response 😓. I haven't run into this issue yet, but I believe that the recent changes in Mix versioning and people using different Webpack versions along with it warrant some Github Action-based tests to be written around it, to make sure everything works as expected for everybody.

I'm happy to accept a PR from a community member if someone is interested in taking this on. Otherwise, I'll take some time within next week and try fixing it myself.

Kind regards and thanks for reporting it. g

[morpheus7CS]

Hey @surgiie,

should be solved in v.0.5.0 release we have just put out.

Closing it until then, but do let me know if anything is out of the ordinary.

Kind regards, g