Can't use @xmcl/system in the browser #307
Description
I'm trying to use @xmcl/resourcepack Three.js project with Vite but I can't get past @xmcl/system's use of fs. I've tried using vite-plugin-node-polyfills but I can't seem to get it set up quite right. Has anyone else done this before?
Edit: Oh, errors would rpobably be useful:
First error I got:
> npm run build
> [email protected] build
> vite build
vite v5.2.7 building for production...
[plugin:vite:resolve] [plugin vite:resolve] Module "fs/promises" has been externalized for browser compatibility, imported by "C:/Users/Aidan/Code/vite-project/node_modules/@xmcl/system/dist/index.mjs". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "C:/Users/Aidan/Code/vite-project/node_modules/@xmcl/system/dist/index.mjs". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "C:/Users/Aidan/Code/vite-project/node_modules/yauzl/index.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "zlib" has been externalized for browser compatibility, imported by "C:/Users/Aidan/Code/vite-project/node_modules/yauzl/index.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "stream" has been externalized for browser compatibility, imported by "C:/Users/Aidan/Code/vite-project/node_modules/yauzl/index.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "C:/Users/Aidan/Code/vite-project/node_modules/fd-slicer/index.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "stream" has been externalized for browser compatibility, imported by "C:/Users/Aidan/Code/vite-project/node_modules/fd-slicer/index.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
✓ 105 modules transformed.
x Build failed in 286ms
error during build:
RollupError: node_modules/@xmcl/system/dist/index.mjs (3:17): "stat" is not exported by "__vite-browser-external", imported by "node_modules/@xmcl/system/dist/index.mjs".
file: C:/Users/Aidan/Code/vite-project/node_modules/@xmcl/system/dist/index.mjs:3:17
1: // index.ts
2: import { open, readEntry, readAllEntries } from "@xmcl/unzip";
3: import { access, stat, writeFile, readFile, readdir } from "fs/promises";
^
4: import { join, sep } from "path";
at getRollupError (file:///C:/Users/Aidan/Code/vite-project/node_modules/rollup/dist/es/shared/parseAst.js:376:41)
at error (file:///C:/Users/Aidan/Code/vite-project/node_modules/rollup/dist/es/shared/parseAst.js:372:42)
at Module.error (file:///C:/Users/Aidan/Code/vite-project/node_modules/rollup/dist/es/shared/node-entry.js:13686:16)
at Module.traceVariable (file:///C:/Users/Aidan/Code/vite-project/node_modules/rollup/dist/es/shared/node-entry.js:14134:29)
at ModuleScope.findVariable (file:///C:/Users/Aidan/Code/vite-project/node_modules/rollup/dist/es/shared/node-entry.js:11822:39)
at FunctionScope.findVariable (file:///C:/Users/Aidan/Code/vite-project/node_modules/rollup/dist/es/shared/node-entry.js:6036:38)
at FunctionBodyScope.findVariable (file:///C:/Users/Aidan/Code/vite-project/node_modules/rollup/dist/es/shared/node-entry.js:6036:38)
at TrackingScope.findVariable (file:///C:/Users/Aidan/Code/vite-project/node_modules/rollup/dist/es/shared/node-entry.js:6036:38)
at BlockScope.findVariable (file:///C:/Users/Aidan/Code/vite-project/node_modules/rollup/dist/es/shared/node-entry.js:6036:38)
at Identifier.bind (file:///C:/Users/Aidan/Code/vite-project/node_modules/rollup/dist/es/shared/node-entry.js:7316:40)
After adding vite-plugin-node-polyfills:
> npm run build
> [email protected] build
> vite build
vite v5.2.7 building for production...
✓ 12 modules transformed.
x Build failed in 177ms
error during build:
Error: [vite:load-fallback] Could not load C:\Users\Aidan\Code\vite-project\node_modules\node-stdlib-browser\esm\mock\empty.js/promises (imported by node_modules/@xmcl/system/dist/index.mjs): ENOENT: no such file or directory, open 'C:\Users\Aidan\Code\vite-project\node_modules\node-stdlib-browser\esm\mock\empty.js\promises'
at async open (node:internal/fs/promises:637:25)
at async Object.readFile (node:internal/fs/promises:1246:14)
at async Object.load (file:///C:/Users/Aidan/Code/vite-project/node_modules/vite/dist/node/chunks/dep-C-KAszbv.js:66959:33)
at async PluginDriver.hookFirstAndGetPlugin (file:///C:/Users/Aidan/Code/vite-project/node_modules/rollup/dist/es/shared/node-entry.js:19495:28)
at async file:///C:/Users/Aidan/Code/vite-project/node_modules/rollup/dist/es/shared/node-entry.js:18666:33
at async Queue.work (file:///C:/Users/Aidan/Code/vite-project/node_modules/rollup/dist/es/shared/node-entry.js:19705:32)
davidmyersdev/vite-plugin-node-polyfills#16 fives a proposal for how to resolve this last error but I haven't been smart enough to figure it out.