Can't use @xmcl/system in the browser

[UndarkAido]

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

> vite-project@0.0.0 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

> vite-project@0.0.0 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.

[zardoy]

I'm trying to use @xmcl/resourcepack Three.js project with Vite

Hey! Very interesting! Do you have a live demo for the project??

I've got a similar project where I bundle that package without any issues but using esbuild (for more fine-tuned import control and because its 3x harder to write plugins for vite).

You can fix the issue by using aliases like that:

export default defineConfig({
  resolve: {
    alias: {
      'fs/promises': "./empty.js", // "fs" or relative path to that empty.js file (which is just  `module.exports = {}`)
    },
  },
})

Let me know if you still have any questions

[UndarkAido]

@zardoy I think I tried to get something similar to a polyfill to work, but wouldn't that cause issues when I actually try to open a resource pack? Either way, I asked on the Discord and @ci010 the the browser value of the package.json for @xmcl/system was incorrctly set, so I've manually changed it to ./dist/index.browser.mjs. Haven't had the time to actually start implementing anything yet, but this gets past the errors I was running into.

[zardoy]

Sorry I didnt try to work with that module in the way you want. But I've also done the resource pack support in the browser as well and I'm actively using the fs module in browser only code. You can also do this by setting up browserfs (it's called ZenFS now).

[zardoy]

Can I get a live preview link for your project or exact things you want to get from the resourcepack module? I might better help you if you would be kind enough to provide some additional details or your final goal… (I just think you might not need to use this module at all but I might be wrong)

[UndarkAido]

This is all I've got so far, haven't even gotten a block to render: https://gist.github.com/UndarkAido/515bfec5b5db20139b5496c5be12fad0

I want to recreate the Minecraft Plus! screensavers but with more customization