Build error: Received '\x00__vite-browser-external?commonjs-proxy'

[niczero]

Describe the bug

I am seeing a build error when working on a project of Inertia + Svelte using Vite. The code works fine in development mode with HMR, but shows this error when doing a production build.

2022-06-03T07:28:49.338Z vite:vite-plugin-svelte error trying to resolve __vite-browser-external from __vite-browser-external?commonjs-proxy via package.json svelte field  TypeError [ERR_INVALID_ARG_VALUE]: The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received '\x00__vite-browser-external?commonjs-proxy'
    at new NodeError (node:internal/errors:372:5)
    at createRequire (node:internal/modules/cjs/loader:1220:13)
    at resolveViaPackageJsonSvelte ($DIR/vite-plugin-svelte-bug/node_modules/@sveltejs/vite-plugin-svelte/dist/index.cjs:1476:59)
    at Object.resolveId ($DIR/vite-plugin-svelte-bug/node_modules/@sveltejs/vite-plugin-svelte/dist/index.cjs:1728:28)
    at $DIR/vite-plugin-svelte-bug/node_modules/rollup/dist/shared/rollup.js:22974:37 {
  code: 'ERR_INVALID_ARG_VALUE'
}

Is the error benign?
Is the root cause on the Inertia side?

Reproduction

I have supplied a minimal repro repo at https://github.com/niczero/vite-plugin-svelte-bug.

The package.json is:

{
  "dependencies": {
    "@inertiajs/inertia": "^0.11.0",
    "@inertiajs/inertia-svelte": "^0.8.0",
    "svelte": "^3.48.0"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.47",
    "svelte-loader": "^3.1.3",
    "svelte-preprocess": "^4.10.6",
    "vite": "^2.9.9"
  },
  "name": "vite-build-bug",
  "private": true,
  "scripts": {
    "build": "vite build --debug"
  }
}

Logs

Log from `vite build --debug`:

> build
> vite build --debug

2022-06-03T07:28:48.601Z vite:config bundled config file loaded in 74.53ms
2022-06-03T07:28:48.602Z vite:vite-plugin-svelte svelte inspector path: $DIR/vite-plugin-svelte-bug/node_modules/@sveltejs/vite-plugin-svelte/src/ui/inspector/
2022-06-03T07:28:48.603Z vite:vite-plugin-svelte no svelte config found at $DIR/vite-plugin-svelte-bug
2022-06-03T07:28:48.604Z vite:vite-plugin-svelte findSvelteDependencies: searching svelte dependencies in $DIR/vite-plugin-svelte-bug
2022-06-03T07:28:48.606Z vite:vite-plugin-svelte additional vite config {
  resolve: {
    mainFields: [ 'svelte', 'module', 'jsnext:main', 'jsnext' ],
    dedupe: [
      'svelte/animate',
      'svelte/easing',
      'svelte/internal',
      'svelte/motion',
      'svelte/ssr',
      'svelte/store',
      'svelte/transition',
      'svelte',
      'svelte-hmr/runtime/hot-api-esm.js',
      'svelte-hmr/runtime/proxy-adapter-dom.js',
      'svelte-hmr'
    ]
  },
  optimizeDeps: { extensions: [ '.svelte' ], esbuildOptions: { plugins: [Array] } },
  ssr: { noExternal: [] }
}
2022-06-03T07:28:48.615Z vite:vite-plugin-svelte resolved options {
  hot: false,
  compilerOptions: { css: false, dev: false },
  extensions: [ '.svelte' ],
  emitCss: true,
  experimental: { prebundleSvelteLibraries: true },
  root: '$DIR/vite-plugin-svelte-bug',
  isBuild: true,
  isServe: false,
  isDebug: true,
  isProduction: true
}
2022-06-03T07:28:48.618Z vite:config using resolved config: {
  build: {
    target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
    polyfillModulePreload: true,
    outDir: 'dist',
    assetsDir: 'assets',
    assetsInlineLimit: 4096,
    cssCodeSplit: true,
    cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
    sourcemap: false,
    rollupOptions: { input: [Array] },
    minify: 'esbuild',
    terserOptions: {},
    write: true,
    emptyOutDir: null,
    manifest: false,
    lib: false,
    ssr: false,
    ssrManifest: false,
    reportCompressedSize: true,
    chunkSizeWarningLimit: 500,
    watch: null,
    commonjsOptions: { include: [Array], extensions: [Array] },
    dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  },
  plugins: [
    'vite:build-metadata',
    'alias',
    'vite-plugin-svelte',
    'vite:modulepreload-polyfill',
    'vite:resolve',
    'vite:html-inline-proxy',
    'vite:css',
    'vite:esbuild',
    'vite:json',
    'vite:wasm',
    'vite:worker',
    'vite:asset',
    'vite:define',
    'vite:css-post',
    'vite:build-html',
    'vite:worker-import-meta-url',
    'vite:watch-package-data',
    'commonjs',
    'vite:data-uri',
    'rollup-plugin-dynamic-import-variables',
    'vite:asset-import-meta-url',
    'vite:build-import-analysis',
    'vite:esbuild-transpile',
    'vite:terser',
    'vite:reporter',
    'vite:load-fallback'
  ],
  resolve: {
    dedupe: [
      'svelte/animate',
      'svelte/easing',
      'svelte/internal',
      'svelte/motion',
      'svelte/ssr',
      'svelte/store',
      'svelte/transition',
      'svelte',
      'svelte-hmr/runtime/hot-api-esm.js',
      'svelte-hmr/runtime/proxy-adapter-dom.js',
      'svelte-hmr'
    ],
    mainFields: [ 'svelte', 'module', 'jsnext:main', 'jsnext' ],
    alias: [ [Object], [Object] ]
  },
  optimizeDeps: {
    extensions: [ '.svelte' ],
    esbuildOptions: {
      keepNames: undefined,
      preserveSymlinks: undefined,
      plugins: [Array]
    }
  },
  ssr: { noExternal: [] },
  configFile: '$DIR/vite-plugin-svelte-bug/vite.config.js',
  configFileDependencies: [
    '$DIR/vite-plugin-svelte-bug/vite.config.js'
  ],
  inlineConfig: {
    root: undefined,
    base: undefined,
    mode: undefined,
    configFile: undefined,
    logLevel: undefined,
    clearScreen: undefined,
    build: {}
  },
  root: '$DIR/vite-plugin-svelte-bug',
  base: '/',
  publicDir: '$DIR/vite-plugin-svelte-bug/public',
  cacheDir: '$DIR/vite-plugin-svelte-bug/node_modules/.vite',
  command: 'build',
  mode: 'production',
  isWorker: false,
  isProduction: true,
  server: {
    preTransformRequests: true,
    fs: { strict: true, allow: [Array], deny: [Array] }
  },
  preview: {
    port: undefined,
    strictPort: undefined,
    host: undefined,
    https: undefined,
    open: undefined,
    proxy: undefined,
    cors: undefined,
    headers: undefined
  },
  env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  assetsInclude: [Function: assetsInclude],
  logger: {
    hasWarned: false,
    info: [Function: info],
    warn: [Function: warn],
    warnOnce: [Function: warnOnce],
    error: [Function: error],
    clearScreen: [Function: clearScreen],
    hasErrorLogged: [Function: hasErrorLogged]
  },
  packageCache: Map(0) { set: [Function (anonymous)] },
  createResolver: [Function: createResolver],
  worker: {
    format: 'iife',
    plugins: [
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object]
    ],
    rollupOptions: {}
  }
}
vite v2.9.9 building for production...
transforming...
2022-06-03T07:28:48.768Z vite:vite-plugin-svelte transform returns compiled js for $DIR/vite-plugin-svelte-bug/node_modules/@inertiajs/inertia-svelte/src/App.svelte
2022-06-03T07:28:48.807Z vite:vite-plugin-svelte transform returns compiled js for $DIR/vite-plugin-svelte-bug/node_modules/@inertiajs/inertia-svelte/src/InertiaLink.svelte
2022-06-03T07:28:49.121Z vite:vite-plugin-svelte transform returns compiled js for $DIR/vite-plugin-svelte-bug/node_modules/@inertiajs/inertia-svelte/src/Render.svelte
2022-06-03T07:28:49.338Z vite:vite-plugin-svelte error trying to resolve __vite-browser-external from ^@__vite-browser-external?commonjs-proxy via package.json svelte field  TypeError [ERR_INVALID_ARG_VALUE]: The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received '\x00__vite-browser-external?commonjs-proxy'
    at new NodeError (node:internal/errors:372:5)
    at createRequire (node:internal/modules/cjs/loader:1220:13)
    at resolveViaPackageJsonSvelte ($DIR/vite-plugin-svelte-bug/node_modules/@sveltejs/vite-plugin-svelte/dist/index.cjs:1476:59)
    at Object.resolveId ($DIR/vite-plugin-svelte-bug/node_modules/@sveltejs/vite-plugin-svelte/dist/index.cjs:1728:28)
    at $DIR/vite-plugin-svelte-bug/node_modules/rollup/dist/shared/rollup.js:22974:37 {
  code: 'ERR_INVALID_ARG_VALUE'
}
✓ 113 modules transformed.
rendering chunks...
dist/assets/main.cbb6be2a.js   84.42 KiB / gzip: 29.49 KiB

### System Info

```shell
System:
    OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
    Memory: 26.52 GB / 30.96 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.15.0 - /usr/bin/node
    npm: 8.5.5 - /usr/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Firefox: 100.0.2
  npmPackages:
    @sveltejs/vite-plugin-svelte: ^1.0.0-next.47 => 1.0.0-next.47 
    svelte: ^3.48.0 => 3.48.0 
    vite: ^2.9.9 => 2.9.9

Severity

annoyance

[dominikg]

A similar sounding issue (#340) was posted before but did not provide a reproduction, so thank you for posting this nice report!

Did you search/replace $DIR in your post to remove your local information or is that something from the actual logs? Couldn't find references to it in the repro.
Also not familiar with inertia, but why is there a svelte-loader dependency there?

[niczero]

yeah, $DIR was my attempt at redacting irrelevant personal info.
And you're right, svelte-loader is irrelevant in the min example, so I've removed that and pushed an additional commit (for the benefit of anyone else watching this). [I'll also review why it's in the real project -- possible it's there due to history and can be removed.]

[dominikg]

This may be related to vitejs/vite#7576

axios, which is a dependency of intertia contains a browser field in it's package.json and is commonjs too. vite-plugin-svelte should probably ignore that import during resolve so it doesn't log the error, but the resulting build is likely still broken.

[dominikg]

one thing you could try is to override axios with https://github.com/developit/redaxios in your package.json something like "axios":"npm:redaxios@latest", depending on your package manager.

This would require a very recent node18 on the serverside where native fetch is available but should work in any modern browser.

[niczero]

Thank you for the suggestions. I have upgraded node from v16 to v18.3.0 and substituted redaxios in place of axios, but the build error is the same.
It sounds like I should take this bug over to vite and see if someone there can shed light. Part of the frustration is the build error and a runtime error are pretty much identical to issues raised over there, but the suggested workarounds & fixes aren't doing it for me.
[I'll leave it to you to decide whether this report should be closed -- I'll add a comment once the other report is raised.]

[dominikg]

It's better to track it in vite repo. Closing it here but please report back if it gets resolved.

[niczero]

Raised vitejs/vite#8469