Build fails with Vite

[fcrozatier]

When using Vite instead of Rollup the bundling fails.

To reproduce:

• Install svelte-ace with Vite

  npm init vite@latest 
  cd my-vite-ace-project
  npm install
  npm i svelte-ace

• Add an Ace component by replacing App.svelte content with

<script lang="ts">
  import { AceEditor } from "svelte-ace";
  import "brace/mode/json";
  import "brace/theme/chrome";
  let text = "";
</script>

<AceEditor
  on:selectionChange={(obj) => console.log(obj.detail)}
  on:paste={(obj) => console.log(obj.detail)}
  on:input={(obj) => console.log(obj.detail)}
  on:focus={() => console.log("focus")}
  on:documentChange={(obj) => console.log(`document change : ${obj.detail}`)}
  on:cut={() => console.log("cut")}
  on:cursorChange={() => console.log("cursor change")}
  on:copy={() => console.log("copy")}
  on:init={(editor) => console.log(editor.detail)}
  on:commandKey={(obj) => console.log(obj.detail)}
  on:changeMode={(obj) => console.log(`change mode : ${obj.detail}`)}
  on:blur={() => console.log("blur")}
  width="100%"
  height="300px"
  lang="json"
  theme="chrome"
  value={text}
/>

• Launch dev script

npm run dev

You will get the following error

npm run dev

> vite-ace@0.0.0 dev
> vite

Pre-bundling dependencies:
  svelte/animate
  svelte/easing
  svelte/internal
  svelte/motion
  svelte/store
  (...and 3 more)
(this will be run only when your dependencies or config have changed)
 > node_modules/totalist/sync/index.mjs:1:9: error: No matching export in "browser-external:path" for import "join"
    1 │ import { join, resolve } from 'path';
      ╵          ~~~~

 > node_modules/totalist/sync/index.mjs:1:15: error: No matching export in "browser-external:path" for import "resolve"
    1 │ import { join, resolve } from 'path';
      ╵                ~~~~~~~

 > node_modules/totalist/sync/index.mjs:2:9: error: No matching export in "browser-external:fs" for import "readdirSync"
    2 │ import { readdirSync, statSync } from 'fs';
      ╵          ~~~~~~~~~~~

 > node_modules/totalist/sync/index.mjs:2:22: error: No matching export in "browser-external:fs" for import "statSync"
    2 │ import { readdirSync, statSync } from 'fs';
      ╵                       ~~~~~~~~

 > node_modules/sirv/build.mjs:2:9: error: No matching export in "browser-external:path" for import "join"
    2 │ import { join, normalize, resolve } from 'path';
      ╵          ~~~~

 > node_modules/sirv/build.mjs:2:15: error: No matching export in "browser-external:path" for import "normalize"
    2 │ import { join, normalize, resolve } from 'path';
      ╵                ~~~~~~~~~

 > node_modules/sirv/build.mjs:2:26: error: No matching export in "browser-external:path" for import "resolve"
    2 │ import { join, normalize, resolve } from 'path';
      ╵                           ~~~~~~~

 > node_modules/local-access/index.mjs:1:9: error: No matching export in "browser-external:url" for import "format"
    1 │ import { format } from 'url';
      ╵          ~~~~~~

 > node_modules/local-access/index.mjs:2:9: error: No matching export in "browser-external:os" for import "networkInterfaces"
    2 │ import { networkInterfaces } from 'os';
      ╵          ~~~~~~~~~~~~~~~~~

error when starting dev server:
Error: Build failed with 9 errors:
node_modules/local-access/index.mjs:1:9: error: No matching export in "browser-external:url" for import "format"
node_modules/local-access/index.mjs:2:9: error: No matching export in "browser-external:os" for import "networkInterfaces"
node_modules/sirv/build.mjs:2:9: error: No matching export in "browser-external:path" for import "join"
node_modules/sirv/build.mjs:2:15: error: No matching export in "browser-external:path" for import "normalize"
node_modules/sirv/build.mjs:2:26: error: No matching export in "browser-external:path" for import "resolve"
...
    at failureErrorWithLog (/Users/fcrz/Code/tuto/code-editor/vite-ace/node_modules/esbuild/lib/main.js:1493:15)
    at /Users/fcrz/Code/tuto/code-editor/vite-ace/node_modules/esbuild/lib/main.js:1151:28
    at runOnEndCallbacks (/Users/fcrz/Code/tuto/code-editor/vite-ace/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/Users/fcrz/Code/tuto/code-editor/vite-ace/node_modules/esbuild/lib/main.js:1149:7)
    at /Users/fcrz/Code/tuto/code-editor/vite-ace/node_modules/esbuild/lib/main.js:1258:14
    at /Users/fcrz/Code/tuto/code-editor/vite-ace/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/Users/fcrz/Code/tuto/code-editor/vite-ace/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/Users/fcrz/Code/tuto/code-editor/vite-ace/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:324:12)

Does anyone know how to configure Vite to avoid this error ? (It works fine with Rollup)

[erezsh]

I'm getting the same errors

[Khrisseh1995]

So after reading through this issue, it seems a workaround is using the optimizeDeps.exclude option within vite. After looking at the offending modules, the following config worked for me:

export default defineConfig({
  plugins: [svelte()],
  optimizeDeps: {
    exclude: ['totalist', 'sirv', 'local-access']
  }
})

[fcrozatier]

This works for me too.

@Khrisseh1995 I'm curious though how did you find the list of modules to exclude ? Because the error logs only mention path, fs and os.

[frthjf]

Works for me too.

Specifically, when using SvelteKit, add

const config = {
      ...
      kit: {
        ...
        vite: () => ({
            optimizeDeps: {
                exclude: ['totalist', 'sirv', 'local-access']
            }
        })
    }

in svelte.config.js.

[bitdom8]

Doesn't work with 1.0 Svelte