目标“main”中的意外输出文件类型为 .html（^^^^^^^^^^^^ 文件扩展名必须为 .js、.mjs 或 .cjs）

Question

i had installed parcel with version number "parcel": "^2.0.0-rc.0" and json i mentioned like this when i try to run the command npm start i am error like this i want to call index.html page but it is showing like File extension must be .js, .mjs, or .cjs How can i solve this issue ?

"name": "receipe-book",
"version": "1.0.0",
"description": "you can get your favourite receipe here",
"main": "index.html",
"scripts": {
 "start": "parcel index.html",
 "build": "parcel build index.html"
},
"author": "Somu Nelavalli",
"license": "ISC",
"dependencies": {
 "parcel": "^2.0.0-rc.0"
}```


Server running at http://localhost:1234
× Build failed.

@parcel/core: Unexpected output file type .html in target "main"

H:\Somu Pracatice\Javascript\complete-javascript-course-master\complete-javascript-course-master\18-forkify\starter\package.json:5:11
 4 |   "description": "you can get your favourite receipe here",
> 5 |   "main": "index.html",
>   |           ^^^^^^^^^^^^ File extension must be .js, .mjs, or .cjs
 6 |   "scripts": {
 7 |     "start": "parcel index.html",

The "main" field is meant for libraries. If you meant to output a .html file, either remove the "main" field or choose a different target name.

Thanks in Advance

Answer 1

The source of that error is the "main": "index.html" field in your package.json . According to the documentation , this field is intended to be used by library projects (eg npm packages that are consumed by others) - it tells parcel to output a commonjs JavaScript bundle at that location, which doesn't make sense for an html file.

Since it doesn't appear that you are developing a library, you can simply remove "main": "index.html" , and it should work fine ( see migration docs ).

To specify the ouput directory for non-library projects, use the --dist-dir cli parameter instead ( see docs ).

Answer 2

Rename main to default in the package.json file.

{
  "version": "1.0.0",
  "description": "",
  "default": "dist/index.html"
}