JavaScript env for browsers is broken
Closed this issue · 9 comments
Hi, I've been testing jco on NodeJS and it has been working well. Great project!
However, I couldn't get it to compile JavaScript files for the browser(without import and exports). How can I do that? I dug in the docs and guides, but no explanation was there that I could find. Do I have to use Webpack or Vite to transpile ES JavaScript to Browser JavaScript?
When I run npx webpack, the following error occurs:
PS C:\Users\temed\Documents\GitHub\jco-test> npx webpack
assets by status 2.54 MiB [cached] 2 assets
asset main.js 98 KiB [emitted] (name: main)
runtime modules 4.23 KiB 7 modules
cacheable modules 77.9 KiB (javascript) 2.54 MiB (asset)
javascript modules 77.9 KiB
modules by path ./node_modules/@bytecodealliance/preview2-shim/lib/ 15.1 KiB
./node_modules/@bytecodealliance/preview2-shim/lib/browser/cli.js 1.25 KiB [built] [code generated]
./node_modules/@bytecodealliance/preview2-shim/lib/browser/filesystem.js 8.24 KiB [built] [code generated]
./node_modules/@bytecodealliance/preview2-shim/lib/browser/clocks.js 1010 bytes [built] [code generated]
./node_modules/@bytecodealliance/preview2-shim/lib/common/io.js 4.62 KiB [built] [code generated]
./browser.js 94 bytes [built] [code generated]
./out_dir/jco_test.js 62.7 KiB [built] [code generated]
asset modules 84 bytes (javascript) 2.54 MiB (asset)
./out_dir/jco_test.core.wasm 42 bytes (javascript) 2.51 MiB (asset) [built] [code generated]
./out_dir/jco_test.core2.wasm 42 bytes (javascript) 28.7 KiB (asset) [built] [code generated]
ERROR in ./node_modules/@bytecodealliance/preview2-shim/lib/browser/filesystem.js 1:0-30
Module not found: Error: Can't resolve './io.js' in 'C:\Users\temed\Documents\GitHub\jco-test\node_modules\@bytecodealliance\preview2-shim\lib\browser'
resolve './io.js' in 'C:\Users\temed\Documents\GitHub\jco-test\node_modules\@bytecodealliance\preview2-shim\lib\browser'
using description file: C:\Users\temed\Documents\GitHub\jco-test\node_modules\@bytecodealliance\preview2-shim\package.json (relative path: ./lib/browser)
Field 'browser' doesn't contain a valid alias configuration
using description file: C:\Users\temed\Documents\GitHub\jco-test\node_modules\@bytecodealliance\preview2-shim\package.json (relative path: ./lib/browser/io.js)
Field 'browser' doesn't contain a valid alias configuration
C:\Users\temed\Documents\GitHub\jco-test\node_modules\@bytecodealliance\preview2-shim\lib\browser\io.js doesn't exist
@ ./out_dir/jco_test.js 3:0-77 17:27-35 20:26-31
@ ./browser.js 1:0-51 3:0-10
webpack 5.89.0 compiled with 1 error in 358 ms
Looks like io.js is missing...
Repo is available here:
@temeddix hi there, thanks for asking this question! - To make sure I understand correctly what you're asking: you're trying to use code transpiled by jco in the browser without using import-notation?
If that's right, can I ask why you're doing that? import is natively supported in browsers when used in ES module contexts. If webpack isn't working correctly, that's something we should investigate. But I don't believe webpack should be required to use import in the browser?
Thanks for the quick reply :)
Basically, I wish to write this:
<!DOCTYPE html>
<html>
<head>
<title>Sample HTML Page</title>
</head>
<body>
<h1>My HTML Page</h1>
<script src="jco_test.js"></script>
</body>
</html>instead of this:
<!DOCTYPE html>
<html>
<head>
<title>Sample HTML Page</title>
</head>
<body>
<h1>My HTML Page</h1>
<script type="importmap">
{
"imports": {
"@bytecodealliance/preview2-shim/cli": "./packages/preview2-shim/lib/browser/cli.js",
"@bytecodealliance/preview2-shim/clocks": "./packages/preview2-shim/lib/browser/clocks.js",
"@bytecodealliance/preview2-shim/filesystem": "./packages/preview2-shim/lib/browser/filesystem.js",
"@bytecodealliance/preview2-shim/http": "./packages/preview2-shim/lib/browser/http.js",
"@bytecodealliance/preview2-shim/io": "./packages/preview2-shim/lib/browser/io.js",
"@bytecodealliance/preview2-shim/logging": "./packages/preview2-shim/lib/browser/logging.js",
"@bytecodealliance/preview2-shim/poll": "./packages/preview2-shim/lib/browser/poll.js",
"@bytecodealliance/preview2-shim/random": "./packages/preview2-shim/lib/browser/random.js",
"@bytecodealliance/preview2-shim/sockets": "./packages/preview2-shim/lib/browser/sockets.js",
"jco": "./src/browser.js"
}
}
</script>
<script type="module" src="jco_test.js"></script>
</body>
</html>With this importmap, it looks like I need to copy the whole packages/preview2-shim folder to my own project repo.
@yoshuawuyts @guybedford I could reproduce this issue. A basic hello world app does not load currently load in the browser.
The browser says that io.js is not found, even if I provide the proper importmap. Other shim modules are loaded fine.
In my humble opinion, on browsers, it will be good to open a file dialog that requires user selection whenever file read/write syscall is made. Currently the support status of file operation for the browser is just written as N/A.
Thanks for posting, yes the browser build is currently not working. This was due to recent IO work, where the browser build is not currently tested in CI (test/browser.html).
I've added a fix to the current IO PR in cf6de64.
jco_test.js:2165 Uncaught TypeError: Right-hand side of 'instanceof' is not an object
at trampoline30 (jco_test.js:2165:13)
at wit-component:shim.indirect-wasi:cli/terminal-stdin@0.2.0-rc-2023-10-18-get-terminal-stdin (wit-component:shim-37cb1faa:0x213)
at wit-component:adapter:wasi_snapshot_preview1._ZN22wasi_snapshot_preview111descriptors11Descriptors3new17h9fed67187c4adadfE (jco_test.core2.wasm:0x47c2)
at wit-component:adapter:wasi_snapshot_preview1._ZN22wasi_snapshot_preview15State11descriptors17he0b52988223bcb4bE (jco_test.core2.wasm:0x1aa7)
at wit-component:adapter:wasi_snapshot_preview1.fd_write (jco_test.core2.wasm:0x2ea4)
at wit-component:shim.adapt-wasi_snapshot_preview1-fd_write (wit-component:shim-37cb1faa:0x261)
at _ZN4wasi13lib_generated8fd_write17hd4964fea612b930fE (jco_test.core.wasm:0xf882)
at _ZN60_$LT$std..io..stdio..StdoutRaw$u20$as$u20$std..io..Write$GT$9write_all17ha8a5c415d0be9b21E (jco_test.core.wasm:0xc6c7)
at _ZN61_$LT$std..io..stdio..StdoutLock$u20$as$u20$std..io..Write$GT$9write_all17haf68676363d7b838E (jco_test.core.wasm:0x9b65)
at _ZN80_$LT$std..io..Write..write_fmt..Adapter$LT$T$GT$$u20$as$u20$core..fmt..Write$GT$9write_str17h10bcf4b729d70e99E (jco_test.core.wasm:0xd8a8)
With the new io.js file from the cf6d364 commit, the shim modules are loaded well. However, I'm getting this error now. May I ask what would be the cause?