parcel-bundler/website

Parcel not compiling javascript while building webapp but works in dev mode.

spanchal-vfx opened this issue · 1 comments

spanchal-vfx commented

I'm 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 like : getbootstrap.com/docs/5.0/getting-started/parcel

Packages used for the project:

  1. parcel-bundler,
  2. popperjs and
  3. bootstrap

Re-created issue with simple 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>HELLO 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 with 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"
  },
"devDependencies": {
    "parcel": "^2.0.0-beta.3.1"
  }
}

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 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 javascript 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!

mischnic commented

"main": "index.js" should indeed be removed.

Open a new issue on https://github.com/parcel-bundler/parcel if you're still having problems with this, this repo is for the https://parceljs.org website