search

Voxelum / minecraft-launcher-core-node

Provide packages to install Minecraft, launch Minecraft and more to build launcher with NodeJs/Electron!
https://docs.xmcl.app/en/core/
MIT License
174 stars 25 forks source link

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

Open UndarkAido opened 6 months ago

UndarkAido commented 6 months ago

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 commented 5 months ago

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 commented 5 months ago

@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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 2 months ago

@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 commented 2 months ago

@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 commented 2 months ago

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

UndarkAido commented 2 months ago

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

zardoy commented 2 months ago

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.