Parcel: [2.0.alpha.3.1] parcel works, parcel build does not - "External modules are not supported when building for browser"

[wojtekmaj]

🐛 bug report

parcel src/index.html works, but parcel build src/index.html does not.

🎛 Configuration (.babelrc, package.json, cli command)

Nothing overly fancy; see the entire test branch: https://github.com/wojtekmaj/react-lifecycle-methods-diagram/tree/parcel-2

🤔 Expected Behavior

parcel build ... command builds production bundle.

😯 Current Behavior

$ parcel build src/index.html --no-source-maps
🚨 @parcel/packager-js: External modules are not supported when building for browser
Error: External modules are not supported when building for browser
    at Object.generateExternalImport (/Users/wojciech.maj/Projekty/react-lifecycle-methods-diagram/node_modules/@parcel/scope-
hoisting/lib/formats/global.js:50:9)
    at exit (/Users/wojciech.maj/Projekty/react-lifecycle-methods-diagram/node_modules/@parcel/scope-hoisting/lib/link.js:549:
23)
    at NodePath._call (/Users/wojciech.maj/Projekty/react-lifecycle-methods-diagram/node_modules/@babel/traverse/lib/path/cont
ext.js:55:20)
    at NodePath.call (/Users/wojciech.maj/Projekty/react-lifecycle-methods-diagram/node_modules/@babel/traverse/lib/path/conte
xt.js:42:17)
    at NodePath.visit (/Users/wojciech.maj/Projekty/react-lifecycle-methods-diagram/node_modules/@babel/traverse/lib/path/cont
ext.js:99:8)
    at TraversalContext.visitQueue (/Users/wojciech.maj/Projekty/react-lifecycle-methods-diagram/node_modules/@babel/traverse/
lib/context.js:112:16)
    at TraversalContext.visitSingle (/Users/wojciech.maj/Projekty/react-lifecycle-methods-diagram/node_modules/@babel/traverse
/lib/context.js:84:19)
    at TraversalContext.visit (/Users/wojciech.maj/Projekty/react-lifecycle-methods-diagram/node_modules/@babel/traverse/lib/c
ontext.js:140:19)
    at Function.traverse.node (/Users/wojciech.maj/Projekty/react-lifecycle-methods-diagram/node_modules/@babel/traverse/lib/i
ndex.js:84:17)
    at traverse (/Users/wojciech.maj/Projekty/react-lifecycle-methods-diagram/node_modules/@babel/traverse/lib/index.js:66:12)
error Command failed with exit code 1.

💻 Code Sample

https://github.com/wojtekmaj/react-lifecycle-methods-diagram/tree/parcel-2

The branch only contains absolute minimum set of changes I needed to do to make Parcel 2 work on development environment. All the rest is unchanged and successfully builds with Parcel 1.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 2.0.0.alpha.3.1
| Node | 12.13.0
| Yarn | 1.19.0
| Operating System | macOS Catalina

[mischnic]

This is actually a configuration issue, the browser puts you into library mode (so no external dependencies are bundled - the error is correctly thrown in that regard).

{
  "targets": {
    "browser": {
      "publicUrl": "./"
    }
  }

This works:

{
  "default": "dist/index.html",
  "targets": {
    "default": {
      "publicUrl": "./"
    }
  }

So I would say: it should be an error that browser is defined in targets but not in the toplevel.

---

But it looks like there are still some issues with your repo... (all json files are empty).
Reduced it down to a few files: https://github.com/mischnic/react-lifecycle-methods-diagram/tree/3816. Might be the bundler

[mischnic]

Here's the issue for the scope hoisting bug: https://github.com/parcel-bundler/parcel/issues/3832

[damianobarbati]

@mischnic I'm having the same issue but I'm not able to get anything beside:

# works
$ yarn parcel watch app/index.html --no-cache --no-autoinstall

# throws
$ yarn parcel build app/index.html --no-cache --no-autoinstall --target dist/index.html --log-level verbose
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Do you know what I may config to output more details?
Im using MacOS Catalina + node v13.2.0 (but also node v12.13.1)

And thanks for help you gave me today so far (to me and the community) 🙂

Repro if needed: https://github.com/damianobarbati/webapp/tree/feature/parcel

[mischnic]

I wouldn't say that you have the same issue given that the error message/behavior is completely different.

--target doesn't do what you want here. dist/index.html will be the default output file in your case. And updating to alpha 3 will also tell you that --target is wrong 😉

[damianobarbati]

@mischnic thanks ⚡️Sorry to have bothered, I wasn't sure whether they were related or not.
yarn upgrade-interactive --latest misses the alpha channel upgrades and keeps prompting me for the 1.x, doh!

I guess I ended up into this https://github.com/parcel-bundler/parcel/issues/3832 but it's already on the radar.

In the artefact generated by import() I see Pie.js instead of Line.js.
The build report showing what files ended up in which artefacts (and required time) is GREAT.

[deepred5]

{
  "default": "dist/index.html",
  "targets": {
    "default": {
      "publicUrl": "/test"
    }
  }
}

@mischnic why publicUrl doesn't work ?

[devongovett]

I'm working on changing the behavior for this to only put you in library mode if the destination filename is a .js file. If you put a .html file in the browser or main field, it should build as an application.

[devongovett]

Should be fixed by #3863.