Running in the browser

[danvoyce]

I believe one of the goals for 2.0 was to be able to run Parcel in the browser. I'm struggling to find any information on this though. Can anyone help?

[DeMoorJasper]

There is a repl branch that has Parcel 2 running in the browser. We're gonna finish this up and make a real repl at some point, but for now it's a great reference to see how it works.

https://github.com/parcel-bundler/parcel/tree/repl-v2

[mischnic]

Copy that command (and change parcel2 to parcel) and run it directly (and not via yarn build) - I don't remember if I got bootstrapping working

(You'll also need to run execute patchDeps.sh after running yarn in the monorepo and before building)

[danvoyce]

Must have tried everything but that 😆

Yeah all looking good! I am getting some warnings in the console though:

ParcelWorker.a15c1f9e.js:7 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

and

falling back to ArrayBuffer instantiation

But it seems to be working fine. Will take a deep dive into this in the morning!

[mischnic]

Did you run yarn copy-wasm as the build script says?

[danvoyce]

Yep, both .wasm files are in the dist folder

[mischnic]

Works for me.
(I've also just updated that branch to contain the latest changes from the main v2 branch. You might need to do something like git fetch; git reset --hard origin/repl-v2)

[danvoyce]

I'm wanting to have a play with this in my personal project (https://looop.dev), but am struggling to install the dependencies.

I guess at the moment I need to install the entire mono repo?

yarn add https://github.com/parcel-bundler/parcel#repl-v2

I'm getting Can't add "@parcel/monorepo": invalid package version undefined. though :/

[mischnic]

I guess at the moment I need to install the entire mono repo?

You can't install the monorepo itself, I vaguely recall that Yarn supported installing subpaths of a repo, but I can't find it in the docs now.

I should probably start upstreaming most of the changes in the repl branch so that the published packages will work at some point

[danvoyce]

That would be amazing if you could. Thanks for your help and swift replies :)

[mischnic]

Changes that cannot be directly upstreamed:

1. Plugins imports are hardcoded in packages/core/package-manager/src/NodePackageManager.js
2. the globalThis.PARCEL_...() callback in the json reporter & sourcemap visualizer are very hacky

Current bugs of the REPL:

• loading babelconfig doesn't work because @babel/core excludes that logic in a browser build
• custom parcelrc doesn't work (this should be not too hard to fix)
• runtimes (= dynamic imports) + builtins don't work (because they read in files from node_modules and in the browser, these files don't exist)

[danvoyce]

Sounds like some pretty meaty tasks. Wish I could help, but I wouldn't know where to start tbh

[plondon]

I'm trying to get the repl-v2-ide or repl-v2 branches to run locally and I keep coming across this error when following the steps above.

git clone [email protected]:parcel-bundler/parcel.git
cd parcel
yarn
sh patchDeps.sh
yarn global add parcel@next

➜  repl git:(repl-v2-ide) yarn copy-wasm && parcel src/index.html --no-source-maps
yarn run v1.22.10
$ cp $(node -p 'require.resolve("@parcel/source-map/wasm-browser/source-map.wasm")') dist/
✨  Done in 0.18s.
Error: Name already registered with serializer
    at registerSerializableClass (/Users/philiplondon/.config/yarn/global/node_modules/@parcel/core/lib/serializer.js:30:11)

node: v14.15.4
yarn: v1.22.10

Appreciate anyones help if they were able to resolve a similar issue!

[plondon]

I also tried using the parcel version from the time of this thread (which I think was yarn global add parcel@^2.0.0-alpha.3) which results in a different error:

➜  repl git:(repl-v2-ide) yarn copy-wasm && parcel src/index.html --no-source-maps
yarn run v1.22.10
$ cp $(node -p 'require.resolve("@parcel/source-map/wasm-browser/source-map.wasm")') dist/
✨  Done in 0.23s.
TypeError: Path must be a string.

@danvoyce did you come across these issues?

[mischnic]

1. clone parcel with the repl-build branch. Run yarn
2. clone parcel with one of the repl branches. Run yarn
3. In the repl checkout, cd into packages/dev/repl. Build with yarn copy-wasm && /path/to/the/first/parcel-checkout/packages/core/parcel/src/bin.js src/index.html --no-source-maps

repl-v2 is currently deployed at https://parcel2-repl.now.sh/
repl-v2-ide at https://parcel2-repl.mischnic.now.sh/

[plondon]

Thanks for the quick response @mischnic !

I now have 2 repos parcel (checked out to repl-build branch) and parcel-repl (checked out to repl-v2-ide)

➜  repl git:(repl-v2-ide) yarn copy-wasm && ../../../../parcel/packages/core/parcel/src/bin.js src/index.html --no-source-maps
yarn run v1.22.10
$ cp $(node -p 'require.resolve("@parcel/source-map/wasm-browser/source-map.wasm")') dist/
✨  Done in 0.27s.
ℹ️ Server running at http://localhost:1234
🚨 Build failed.
@parcel/transformer-js: ENOENT: no such file or directory, open '/Users/philiplondon/Playground/parcel-repl/node_modules/runtimes/js/src/bundle-manifest.js'
Error: ENOENT: no such file or directory, open '/Users/philiplondon/Playground/parcel-repl/node_modules/runtimes/js/src/bundle-manifest.js'

I've run yarn in both parcel and percel-repl repos in the root folders. Any other ideas?

[plondon]

I redid step 2 and it's actually working now, no idea why but thank you so much @mischnic , can I buy you a coffee?