Can't resolve 'http' in '.../node_modules/@inertiajs/server/lib'

[vuletuanbt]

I'm trying to set up SSR with Laravel 8 and Vue3 but run into this problem.

ERROR in ./node_modules/@inertiajs/server/lib/index.js 10:12-27
Module not found: Error: Can't resolve 'http' in '/Users/apple/Learning/sso/node_modules/@inertiajs/server/lib'

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.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
    - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "http": false }

webpack compiled with 1 error

[secondmanveran]

You may need to alias it in your webpack config.

Are you doing a separate config file for SSR? Because SSR can't have any modules in it that reference window or browser based packages.

I use Vite but the issue is the same. I found I needed to use different packages in some cases in order to get it working. And I'm still having an issue getting it to compile all it needs in a single bundle.

[vuletuanbt]

I found out the problem was mix --production. To fix it, in webpack.mix.js, add resolve fallback like this

const mix = require("laravel-mix");

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js("resources/js/app.js", "public/js")
    .vue()
    .postCss("resources/css/app.css", "public/css", []);

mix.webpackConfig({
    output: {
        chunkFilename: "js/[name].js?id=[chunkhash]",
    },
    resolve: {
        fallback: { "http": require.resolve("stream-http") } # here
    }
});