Comments (26)
devongovett
commented on May 2, 2024
21
I think this is an issue with the minifier... uglify-js doesn't like non ES5 inputs. Will work on fixing that.
In the mean time, you can disable the minifier with parcel build index.html --no-minify
from parcel.
svenheden
commented on May 2, 2024
10
Thanks for a great project @devongovett! FYI the Angular team fixed this same issue by using uglify-es for minifying ES2015+ code instead of uglify-js, maybe that's a solution you can use too.
from parcel.
marcioj
commented on May 2, 2024
9
I was giving a look into this issue. And maybe it is not related to uglify-js. At least in my tests.
Like @pke I have noticed this error:
⏳ Building index.html...
🚨 C:\dev\projects\parceljs\src\index.html: Unexpected token: operator (<)
at JS_Parse_Error.get (eval at <anonymous> (C:\dev\projects\parceljs\node_modules\htmlnano\node_modules\uglify-js\tools\node.js:27:1), <anonymous>:86:23)
at Logger.error (C:\dev\projects\parceljs\node_modules\parcel-bundler\src\Logger.js:69:22)
at Bundler.bundle (C:\dev\projects\parceljs\node_modules\parcel-bundler\src\Bundler.js:135:19)
at <anonymous>
But it happens because the html used as example is not 100% correct
<body>
<div id="root"></div>
<script src="./index.js"></div>
^ it should be </script> here
</body>
htmlnano which is used to minify the html also minifies script tags. Because the script tag is not closed it understands </div></body> as the script content and sends to uglify-js which causes the problem with the operator (<) above.
And about this error
./node_modules/.bin/parcel build index.html
🚨 /Users/azhar/projects/react/index.js: Cannot read property 'start' of undefined
at module.exports (/Users/azhar/projects/react/node_modules/babel-to-estree/babylon-to-espree/attachComments.js:56:42)
at module.exports (/Users/azhar/projects/react/node_modules/babel-to-estree/babylon-to-espree/index.js:35:3)
at exports.toEstree (/Users/azhar/projects/react/node_modules/babel-to-estree/index.js:9:3)
at module.exports (/Users/azhar/projects/react/node_modules/parcel-bundler/src/transforms/uglify.js:10:39)
at <anonymous>
it is throwed because babel-to-estree tries to get the loc info from the 'use strict' directive which is not always present, like when automatically added by babel. In this case I got it working by simple adding the 'use strict' directive in the top of the file. Because babel ignores it when it is already present.
I will try to send a fix to babel-to-estree. About the html problem not sure if a validator should be added ... or if htmlnano has some option to make the parsing more strict.
from parcel.
konsumer
commented on May 2, 2024
2
I also tried with babel-preset-minify and it just seemed to skip it:
{
"name": "test-parcel",
"version": "1.0.0",
"scripts": {
"start": "parcel index.html",
"build": "cross-env NODE_ENV=production parcel build index.html --no-minify"
},
"devDependencies": {
"babel-preset-env": "^1.6.1",
"babel-preset-minify": "^0.2.0",
"babel-preset-react": "^6.24.1",
"cross-env": "^5.1.1",
"parcel-bundler": "^1.0.1"
},
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"babel": {
"presets": [
"react",
"env"
],
"env": {
"production": {
"presets": [
"minify"
]
}
}
}
}from parcel.
DeMoorJasper
commented on May 2, 2024
1
@davidnagli It also removes babel-to-estree because ES6 is not supported when usin AST into Uglify, which fixes this bug
from parcel.
stanleynguyen
commented on May 2, 2024
1
I had the same problem but found out that it's actually due to my HTML. By changing <script src="script.js" /> to <script src="script.js"></script>, I solved the problem. Maybe you can give this a try
from parcel.
jaredpalmer
commented on May 2, 2024
Just got the same error, babel-preset-react-app, react, react-dom
from parcel.
azharkhan
commented on May 2, 2024
FWIW: I tried installing babel-preset-env, babel-preset-react and added .babelrc file, but no luck there either
from parcel.
azharkhan
commented on May 2, 2024
amazing! thanks so much @devongovett
from parcel.
devongovett
commented on May 2, 2024
Going to reopen to track this issue.
from parcel.
pke
commented on May 2, 2024
I can confirm that adding --no-minify solves the issue which was:
⏳ Building index.html...
🚨 C:\dev\projects\parceljs\src\index.html: Unexpected token: operator (<)
at JS_Parse_Error.get (eval at <anonymous> (C:\dev\projects\parceljs\node_modules\htmlnano\node_modules\uglify-js\tools\node.js:27:1), <anonymous>:86:23)
at Logger.error (C:\dev\projects\parceljs\node_modules\parcel-bundler\src\Logger.js:69:22)
at Bundler.bundle (C:\dev\projects\parceljs\node_modules\parcel-bundler\src\Bundler.js:135:19)
at <anonymous>from parcel.
g3r4n
commented on May 2, 2024
the issue come from the call to toEstree function from the babel-to-estree module. Two modules babel-types and babylon-walk are imported but never used. Look like something from the conception was forget to be developed. @devongovett or @thejameskyle can you explain what you were expecting in the uglify.js file ?
I don't think uglify-es will fix the issue because the error comes before the call to the minify function.
from parcel.
davidnagli
commented on May 2, 2024
Waiting on #145 to be implemented
Edit: PR #157
from parcel.
DeMoorJasper
commented on May 2, 2024
@davidnagli This had nothing to do with Uglify-JS, however #157 would fix it because it no longer uses babel-to-estree which caused the bug
from parcel.
davidnagli
commented on May 2, 2024
@DeMoorJasper Isn't #157 doing just that; it adds Uglify-ES
from parcel.
davidnagli
commented on May 2, 2024
Got it. Thanks for clearing that up :)
from parcel.
DeMoorJasper
commented on May 2, 2024
This should be fixed, 0.0.3 just got released of babel-to-estree including the fix.
from parcel.
sarahbethfederman
commented on May 2, 2024
I ran into this, so I'm just leaving a note here that if you're using yarn you may need to add this to your package.json to get the babel-to-estree fix:
"resolutions": {
"parcel-bundler/babel-to-estree": "^0.0.3"
}
from parcel.
DeMoorJasper
commented on May 2, 2024
Addition to comment above: You could also use the github version than it should use Uglify ES and babel generator and disregard babel-to-estree entirely
from parcel.
haquezameer
commented on May 2, 2024
I tried the same thing parcel build index.html --no-minify, but it still does not work for me.
The generated index.html does not show anything and has the following errors:
Somehow, the css & js files are not found, if I correct the referenced path from index.html for the css & js file, then too all of the content is not displayed and my routes don't work.
Here is my package.json
{
"name": "xxx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"material-ui": "^0.20.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"typeface-roboto": "0.0.45"
},
"devDependencies": {
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"parcel-bundler": "^1.3.1"
}
}
.babelrc
{
"presets": [
"env",
"react"
]
}
Project structure:
- index.html
- src
- index.js
- Components
- Components
- package.json
- .babelrc
any ideas on how to resolve, please help @devongovett, anyone?
from parcel.
DeMoorJasper
commented on May 2, 2024
@zamhaq this bug has long been fixed please open up a new issue report.
Preferably with a testable example
from parcel.
umamichi
commented on May 2, 2024
Please try this.
parcel build app/index.html --public-url ./
parcel build app/index.html
👉 the file path of js and css in dist/index.html are /dist/ea.......161fbe3839.js
parcel build app/index.html --public-url ./
👉 the file path of js and css in dist/index.html are ./ea.......161fbe3839.js
from parcel.
dumptyd
commented on May 2, 2024
This one's still happening for me with 1.6.2. Here's the error I get
🚨 /path/to/index.html: <css input>:1:18: Unknown word
no-minify fixed this, but the bug is still there.
from parcel.
DeMoorJasper
commented on May 2, 2024
@dumptyd update to 1.7.2 and open a new issue if you have an issue
from parcel.
thosakwe
commented on May 2, 2024
Happens in 1.8.1 too. However, it seems parcel serve doesn't support --no-minify.
from parcel.
DeMoorJasper
commented on May 2, 2024
Because only production builds minify, as that takes a lot of time... @thosakwe
from parcel.
Related Issues (20)
- react-refresh dependency is locked at v0.9.0 HOT 6
- @parcel/transformer-css: Unknown at rule: @apply
- @parcel/optimizer-css rejects CSS namespaces on the ground they should appear earlier in the CSS HOT 2
- Async import doesn't work as expected when passing a dynamic path
- [RFC] Moving to trunk based development and introducing feature flags HOT 2
- Cannot import css from mantine-datatable HOT 3
- postcss fails: @parcel/transformer-postcss: Cannot read properties of undefined HOT 1
- @parcel/register throws error `parcel[_core(...).INTERNAL_RESOLVE] is not a function`
- Parcel build fails on Chrome < 86 due to dynamic import and chunking issues HOT 1
- Unable to make `typeof process !== 'undefined'` false
- Parcel Macro in the REPL HOT 1
- segfault on parcel >= 2.10.0
- `parcel/config-webextension` can build extensions incompatible with Firefox's Add-Ons Store HOT 1
- Type-introspection with macros
- Vue 3 defineProps fail with imported types
- TypeScript syntax does not work in Vue templates
- I can't modified the HTML, cause every single time parcel brokes HOT 2
- Parcel build/watch silently fails HOT 1
- @parcel/transformer-css: Unexpected token Semicolon HOT 2
- Default Cache folder location is on root instead of workspace folder HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from parcel.