Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't use @xmcl/system in the browser #307

Open
UndarkAido opened this issue Apr 3, 2024 · 10 comments
Open

Can't use @xmcl/system in the browser #307

UndarkAido opened this issue Apr 3, 2024 · 10 comments

Comments

@UndarkAido
Copy link

UndarkAido commented Apr 3, 2024

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.

@zardoy
Copy link
Contributor

zardoy commented Apr 26, 2024

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
Copy link
Author

@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
Copy link
Contributor

zardoy commented Apr 29, 2024

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
Copy link
Contributor

zardoy commented May 1, 2024

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
Copy link
Author

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

@zardoy
Copy link
Contributor

zardoy commented Jul 19, 2024

@UndarkAido I made a whole library for you that you can use to render things with modern bundlers like Vite: https://npmjs.com/mc-assets

@UndarkAido
Copy link
Author

@zardoy That's awesome, thank you so much! I'm dealing with the aftermath of a cross-country move but I'm going to love digging into this when I have the time.

@zardoy
Copy link
Contributor

zardoy commented Jul 19, 2024

You need to thank @ci010 who made making this module possible! I'm using @xmcl/installer to auto-publish new versions assets

@UndarkAido
Copy link
Author

Oh, it's not reading from a JAR or ZIP? I was hoping to also support resource packs, still cool though.

@zardoy
Copy link
Contributor

zardoy commented Jul 19, 2024

Oh, it's not reading from a JAR or ZIP? I was hoping to also support resource packs, still cool though.

It's reading from jar during the build before publish. You can still support resource packs (see there is an example with generating custom atlas) if you want you can use browserfs to read files dynamically or you can also do it at build step (which is recommended). I can give you a complete code if interested.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants