[w/ Inertia] Error: Cannot access "./util.inspect.custom" in client code.

[sebsobseb]

• Laravel Vite Plugin Version: 0.5.0
• Laravel Version: 9.20.0
• Node Version: 16.15.0
• NPM Version: 8.10.0
• inertiajs/inertia-laravel Version : 0.6.3
• @inertiajs/inertia-vue3: 0.6.0
• Inertia SSR: ✖️ NO
• Yarn Version: 3.2.1
• Tailwind Version: 3.1.6
• Host operating system: macOS Monterey (12.4 Apple M1 Max)
• Web Browser & Version: Chrome 103
• Running in Sail / Docker: Sail

Description:

When running yarn dev i see:

VITE v3.0.2  ready in 247 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

  LARAVEL v9.20.0  plugin v0.5.0

  ➜  APP_URL: http://localhost

🚨 But in my browser I see a white page with a error in console:

Uncaught Error: Module "./util.inspect" has been externalized for browser compatibility. Cannot access "./util.inspect.custom" in client code.
    at Object.get (util.inspect:9:13)
    at .yarn/cache/object-inspect-npm-1.12.2-f125a822c0-a534fc1b85.zip/node_modules/object-inspect/index.js (index.js:69:33)
    at __require (chunk-OL3AADLO.js?v=ac4fe6e7:9:50)
    at .yarn/cache/side-channel-npm-1.0.4-e1f38b9e06-351e41b947.zip/node_modules/side-channel/index.js (index.js:5:15)
    at __require (chunk-OL3AADLO.js?v=ac4fe6e7:9:50)
    at .yarn/cache/qs-npm-6.11.0-caf1bc9dea-6e1f29dd53.zip/node_modules/qs/lib/stringify.js (stringify.js:3:22)
    at __require (chunk-OL3AADLO.js?v=ac4fe6e7:9:50)
    at .yarn/cache/qs-npm-6.11.0-caf1bc9dea-6e1f29dd53.zip/node_modules/qs/lib/index.js (index.js:3:17)
    at __require (chunk-OL3AADLO.js?v=ac4fe6e7:9:50)
    at .yarn/cache/@inertiajs-inertia-npm-0.11.0-d50fb317f9-69653f3cb4.zip/node_modules/@inertiajs/inertia/dist/index.js (index.js:1:99)

✅ running yarn build works as expected and gives no errors.

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    server: {
        hmr: {
            host: 'localhost',
        },
    },
    plugins: [
        laravel([
            'resources/js/app.js',
        ]),
        vue({
            template: {
                transformAssetUrls: {
                    template: {
                        transformAssetUrls: {
                            base: null,
                            includeAbsolute: false,
                        },
                    },
                },
            },
        }),
    ]
});

app.js

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

createInertiaApp({
    resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob('./pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) });
        app.use(plugin).mount(el);
    },
});

🔍 After some debugging I discovered that this is an issue caused by object-inspect (used by qs, which is used by Inertia).
I get the same error if I simply import object-inspect in my app.js...

// resources/js/app.js

import objectInspect from 'object-inspect';

Steps To Reproduce:

1. Install default Laravel app using Sail.
2. yarn add object-inspect or npm install object-inspect
3. Add import objectInspect from 'object-inspect'; in resources/js/app.js
4. go to http://localhost

https://stackblitz.com/edit/vite-whdqvh?file=main.js
(still trying to make this reproduction URL work, but seems like it's difficult to make the plugin work in a sandbox env, any help would be appreciated 🙏)

[sebsobseb]

Found a similar issue in the Vite issues, but instead of ./util.inspect it was for events: vitejs/vite#9238

Someone from the Vite team closed the issue and said:
"events cannot be used from browser and you need to install a polyfill by yourself." ?

[sebsobseb]

✅ The issue disappeared when I switched from Yarn (3.2.1) to NPM 🤷‍♂️