9

Good day, guys! I looked online for a solution but couldn't find one, so I'm turning to you for assistance. Please bear with me as I describe the situation in full.

I'm a beginner who's having trouble with parcel while developing a bootstrap web project. First, it throws an error for using index.js which doesn't make any sense. As per the bootstrap, doc. folder structure suppose to be

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

I'm following the bootstrap documentation to a tee. Link: https://getbootstrap.com/docs/5.0/getting-started/parcel/

Packages used for the project:

  • parcel-bundler,

  • popperjs and

  • bootstrap

Re-created issue with simple HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>HELLOW WORLD</h1>
  <script type="module" src="index.js"></script>
</body>
</html>

index.js

import * as bootstrap from 'bootstrap';
alert('JAVA is LOADED');
console.log('Java is loaded another example');

custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel ./src/index.html",
    "prebuild": "npx rimraf build",
    "build": "parcel build --public-url ./ ./src/index.html --dist-dir build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@popperjs/core": "^2.9.2",
    "bootstrap": "^5.0.2"
  }
}

Error message:

@parcel/namer-default: Target "main" declares an output file path of "index.js" which does not match the compiled bundle type "html".
/Users/abc/Visual_Code/test/package.json:5:11
  4 |   "description": "",
> 5 |   "main": "index.js",
>   |           ^^^^^^^^^^^^^^^^^^ Did you mean "index.html"?
  6 |   "scripts": {
  7 |     "dev": "parcel ./src/index.html",
Try changing the file extension of "main" in package.json.

Other posts on the internet advised replacing **"main":** value with "../dist/index.js," but it didn't work either. When I tried eliminating the full "main": line, the webapp was built, but no java was loaded. If I do npm run dev, the webapp executes the javascript (I maintained "main": "index.js" in dev mode), and I can see the alert message and log message in the console, but it does not function while building the app. When I went too far in developing my webapp in the parcel, I'm utterly blank about what can be done at this point.

I would really appreciate your help!

Andrew Stegmaier
  • 3,429
  • 2
  • 14
  • 26
Sam Singhania
  • 93
  • 1
  • 4

4 Answers4

14

Remove the main attribute from package.json

Dick Larsson
  • 487
  • 3
  • 5
10

This is because there are 2 entry points in your application for production(build)

  1. "main": "index.js",
  2. "build": "parcel build --public-url ./ ./src/index.html --dist-dir build"

This error is pretty much unavoidable in most cases because these are just default settings and its nobody's fault.

I was able to solve the issue from official documentation link. To solve the error you can replace your "main": "index.js", with

"source": "src/index.html",

accordingly you can also reduce the "start" (or dev) and "build" scripts. See link.

first
  • 616
  • 1
  • 7
  • 13
1

You've probably worked this out by now but I was a bit confused by this myself when using parcel with an express app so here's an answer for anyone coming later. The problem here is that the npm standard is clashing with parcel's opinionated expectations.

main is required for npm modules. From the npm docs:

The main field is a module ID that is the primary entry point to your program. That is, if your package is named foo, and a user installs it, and then does require("foo"), then your main module's exports object will be returned.

You are creating a standalone executable program, rather than a module, so main is irrelevant in this situation. Dick Larsson is therefore correct to say you should remove the main from your package.json, however that's only half an answer. Ideally you should add a start value to your scripts:

"scripts": {
  "start": "node index.js"
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --dist-dir build"
},

Now you can start your app with npm start after it is built, and parcel won't complain about the value in main.

Hugh
  • 371
  • 1
  • 8
0

Your package.json says

main = "index.js"

But it seems the entry point for your app is index.html.

So you need to change

main="index.html" (will work but not recommended)

Note: The above will build in the root directory, so the recommended way is

main="dist/index.html" (recommended)

You may change the name of your build target directory name as needed or as you wish instead of dist. But most packages found in the ecosystem use dist by convention

Akilan
  • 1