Trouble building webapp with parcel-bundler (Not loading Java after compilation)
Question
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!
4 answers
solution1
6 2021-12-14 07:15:54
从 package.json 中删除 main 属性
solution2
1 2022-05-18 05:43:40
This is because there are 2 entry points in your application for production(build)
"main": "index.js",-
"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.
solution3
0 2021-07-16 14:15:29
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
solution4
0 2022-01-20 12:33:31
从 package.json 中删除 main 属性，如果您使用的是 VS Code，可能需要重新启动 VS Code。
"solution5
0 2022-01-25 21:40:08
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 . Fromthe 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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.