New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to `build` index.html #8

Closed
azharkhan opened this Issue Dec 5, 2017 · 26 comments

Comments

Projects
None yet
@azharkhan

azharkhan commented Dec 5, 2017

Firstly, super excited for this. I was surprised at how quickly I was able to get a dev environment setup. You are doing some awesome work.

I have parcel-bundler, react and react-dom installed.

I have a simple index.html file and an index.js file which is just outputting "Hello World" to a new div on the index.html file.

<body>
    <div id="root"></div>
     <script src="./index.js"></div>
</body>

I have no problems running parcel index.html or parcel watch index.html

however when I run parcel build index.html I get the following 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>

Edit: Temporary workaround

@jaredpalmer

This comment has been minimized.

jaredpalmer commented Dec 5, 2017

Just got the same error, babel-preset-react-app, react, react-dom

@azharkhan

This comment has been minimized.

azharkhan commented Dec 5, 2017

FWIW: I tried installing babel-preset-env, babel-preset-react and added .babelrc file, but no luck there either

@devongovett

This comment has been minimized.

Member

devongovett commented Dec 5, 2017

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

@konsumer

This comment has been minimized.

konsumer commented Dec 5, 2017

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"
        ]
      }
    }
  }
}
@azharkhan

This comment has been minimized.

azharkhan commented Dec 5, 2017

amazing! thanks so much @devongovett

@devongovett

This comment has been minimized.

Member

devongovett commented Dec 6, 2017

Going to reopen to track this issue.

@jonathanp

This comment has been minimized.

jonathanp commented Dec 6, 2017

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.

@pke

This comment has been minimized.

pke commented Dec 6, 2017

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>

@jamiebuilds jamiebuilds added the 🐛 Bug label Dec 7, 2017

@g3r4n

This comment has been minimized.

g3r4n commented Dec 7, 2017

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.

@marcioj

This comment has been minimized.

Contributor

marcioj commented Dec 8, 2017

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.

@davidnagli

This comment has been minimized.

Member

davidnagli commented Dec 10, 2017

Waiting on #145 to be implemented

Edit: PR #157

@DeMoorJasper

This comment has been minimized.

Member

DeMoorJasper commented Dec 10, 2017

@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

@davidnagli

This comment has been minimized.

Member

davidnagli commented Dec 10, 2017

@DeMoorJasper Isn't #157 doing just that; it adds Uglify-ES

@DeMoorJasper

This comment has been minimized.

Member

DeMoorJasper commented Dec 10, 2017

@davidnagli It also removes babel-to-estree because ES6 is not supported when usin AST into Uglify, which fixes this bug

@davidnagli

This comment has been minimized.

Member

davidnagli commented Dec 10, 2017

Got it. Thanks for clearing that up :)

@DeMoorJasper

This comment has been minimized.

Member

DeMoorJasper commented Dec 10, 2017

This should be fixed, 0.0.3 just got released of babel-to-estree including the fix.

@sarahbethfederman

This comment has been minimized.

sarahbethfederman commented Dec 11, 2017

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"
  }
@DeMoorJasper

This comment has been minimized.

Member

DeMoorJasper commented Dec 11, 2017

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

@zamhaq

This comment has been minimized.

zamhaq commented Dec 29, 2017

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:

js_not_found

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?

@DeMoorJasper

This comment has been minimized.

Member

DeMoorJasper commented Dec 29, 2017

@zamhaq this bug has long been fixed please open up a new issue report.
Preferably with a testable example

@umamichi

This comment has been minimized.

umamichi commented Mar 14, 2018

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

@stanleynguyen

This comment has been minimized.

stanleynguyen commented Apr 12, 2018

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

@dumptyd

This comment has been minimized.

dumptyd commented Apr 26, 2018

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.

@DeMoorJasper

This comment has been minimized.

Member

DeMoorJasper commented Apr 26, 2018

@dumptyd update to 1.7.2 and open a new issue if you have an issue

@thosakwe

This comment has been minimized.

thosakwe commented Jun 5, 2018

Happens in 1.8.1 too. However, it seems parcel serve doesn't support --no-minify.

@DeMoorJasper

This comment has been minimized.

Member

DeMoorJasper commented Jun 5, 2018

Because only production builds minify, as that takes a lot of time... @thosakwe

@parcel-bundler parcel-bundler locked as resolved and limited conversation to collaborators Jun 5, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.