[v2] bad error message for package.json#main mismatch with html entry point: "Destination name index.js extension does not match bundle type "html"

[swyxio]

🐛 bug report

parcel build is broken. if you take the basic index.html/styles.css setup in the readme: https://github.com/parcel-bundler/parcel/tree/v2#getting-started

you can run parcel index.html fine, but when you run parcel build you get the above mentioned error

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

{
  "name": "netlify-drop-demo-site-master",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/sw-yx/netlify-drop-demo-site-master.git",
  "author": "sw-yx <swyx@dontemail.me>",
  "license": "MIT",
  "devDependencies": {
    "parcel": "^2.0.0-alpha.1.1"
  },
  "scripts": {
    "build": "parcel build basic.html"
  },
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  }
}

🤔 Expected Behavior

it should build

😯 Current Behavior

doesnt build

yarn run v1.17.0
$ /Users/swyx/Downloads/netlify-drop-demo-site-master/node_modules/.bin/parcel build basic.html
🚨 Destination name index.js extension does not match bundle type "html"
    at BundlerRunner.nameBundle (/Users/swyx/Downloads/netlify-drop-demo-site-master/node_modules/
@parcel/core/lib/BundlerRunner.js:137:17)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

💁 Possible Solution

no idea

🔦 Context

just trying to try out parcel v2

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-alpha.1.1
Node	10.13
npm/Yarn	6.51/1.17
Operating System	osx latest

[kwelch]

I think could be related to your package.json#main. It uses that to define the output files and your entry is an html file, but your main is expected it to output as a js file. Try updating your main to dist/index.html

[devongovett]

We should add a better error message for this...

[swyxio]

i see, thanks kyle. yeah.. if im specifying my entry point in the cli, i dont expect my package json main to have Any Effect at all... so this feels like a nasty implicit relationship here that isnt documented.

[devongovett]

if im specifying my entry point in the cli, i dont expect my package json main to have Any Effect at all... so this feels like a nasty implicit relationship here that isnt documented.

Parcel uses the main, browser, etc. fields as targets to build the output to. See https://github.com/parcel-bundler/parcel/tree/v2#targets.

[devongovett]

Based on this feedback and other confusion about this, we're considering only using main as a target if the entry point is a JS file. This feature was mostly meant for building libraries instead of applications, where you'd want the package.json to point to the built file. For applications, you typically wouldn't need a main in package.json, but we can ignore it if you do.

[swyxio]

right. whatever you decide, i'll be happy as long as it gets logged somewhere, aka entry point is a JS file, using package.json main field ${main} as target or has a nicer error message when it inevitably fails :)

[swyxio]

ran into this again today :( if i get time i would love to contribute a PR. can you give me some guidelines as to what you would like parcel to do in this scenario? should we warn early (might preempt more issues) or only at the site of the error (more local but super specific)?

[swyxio]

oh wow, just figured out that if you just leave out the "main" field in package.json and run parcel build index.html it WORKS BEAUTIFUULLY we should just recommend that. it also causes #3442 btw, because there will be two index.html entries (one from package.json, one from command line)

[devongovett]

@sw-yx what do you think of the below error message? Trying to make it as clear as possible.

[swyxio]

i think it is a huge improvement, but also do we want to let people specify parcel build index.html and also have a "main" field? i cannot think of a good reason to make this a norm. rather make it abundantly clear they should be mutually exclusive (unless you're making a js library).

i think fwiw the reason i often have errant "main" fields i dont pay attention to is i often run npm init -y on projects. id be willing to bet CRA and gatsby also create a useless stub "main" field. one nice smoke test to deliver on is can I reliably take a default CRA app and swap out react-scripts for parcel and it "just works"? or if it errors we have a nice story for little things like this

[devongovett]

"main" is the output here, not the input. I know it's the opposite from what most tools use the field for, but it makes sense: Parcel is building the code that will be consumed by other tools. So, the input is "source" or whatever you pass on the CLI, and the output is "main".

[swyxio]

ok gotcha. well, i look forward to when this pr lands!

[devongovett]

Landed in #3863!

[sylvainpolletvillard]

i think it is a huge improvement, but also do we want to let people specify parcel build index.html and also have a "main" field? i cannot think of a good reason to make this a norm. rather make it abundantly clear they should be mutually exclusive (unless you're making a js library).

Sorry to up this @sw-yx , but I'm in this exact situation. I'm making a JS library, so i have a "main" field targeting an "index.js" file. I also have a small demonstration web page for the library, which I build with parcel build demo/index.html.

This worked fine with Parcel v1, but now that I want to upgrade to Parcel 2, I'm stuck with this error message, and I cannot remove the "main" field. What am I supposed to do here ?

[mischnic]

https://v2.parceljs.org/features/targets/#library-targets:

To make Parcel ignore one of these fields, specify false in the targets field.

{
 "main": "unrelated.js",
 "targets": {
   "main": false
 }
}

[MahanVahdani]

if you are not trying to write a library you can completely delete "main": "index.js", from your package.json.

[hass123uk]

Could be nice to give a hint in the error messages, stating something like if you are building a web app leave the main field undefined or include that high up in the documentation for setting up a project.

Running npm init generates the main field. The out of the box experience of running parcel build is then a failure due to "@swc/helpers" which when resolves states that main should be index.html, I did not see the message remove the main field in the error message. I tend to read lists of solutions more then a multiple options in a single sentence.

Anyway I figured it out just leaving my 2 cents here. Thanks.

[ghost]

Encountered the same issues with main field.
The main field is created by npm init default settings which points to the main.js.
It will be a lot less confusing if Parcel follows the same since npx parcel index.htm and npx parcel build index.html reads from the package.json created by npm init.
By removing the main manually, the build does work. However, the user need to remove the "/" from the src="/xxxxxx.js" in the index.html file.