Unable to `build` index.html

Question

Unable to `build` index.html

azharkhan opened this issue 7 years ago · comments

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

Jared Palmer · Answer 1 · Wed Dec 06 2017 03:17:11 GMT+0800 (China Standard Time)

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

Azhar Khan · Answer 2 · Wed Dec 06 2017 03:18:39 GMT+0800 (China Standard Time)

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

Devon Govett · Answer 3 · Wed Dec 06 2017 03:55:46 GMT+0800 (China Standard Time)

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

David Konsumer · Answer 4 · Wed Dec 06 2017 04:16:30 GMT+0800 (China Standard Time)

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

Azhar Khan · Answer 5 · Wed Dec 06 2017 04:22:33 GMT+0800 (China Standard Time)

amazing! thanks so much @devongovett

Devon Govett · Answer 6 · Wed Dec 06 2017 14:33:15 GMT+0800 (China Standard Time)

Going to reopen to track this issue.

Jonathan Svenheden · Answer 7 · Wed Dec 06 2017 16:03:49 GMT+0800 (China Standard Time)

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.

Philipp Kursawe · Answer 8 · Thu Dec 07 2017 04:31:24 GMT+0800 (China Standard Time)

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>

Enguerrand des Vaux · Answer 9 · Thu Dec 07 2017 20:09:34 GMT+0800 (China Standard Time)

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.

Marcio Junior · Answer 10 · Fri Dec 08 2017 08:04:38 GMT+0800 (China Standard Time)

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.

David Nagli · Answer 11 · Mon Dec 11 2017 03:09:37 GMT+0800 (China Standard Time)

Waiting on #145 to be implemented

Edit: PR #157

Jasper De Moor · Answer 12 · Mon Dec 11 2017 03:14:16 GMT+0800 (China Standard Time)

@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

David Nagli · Answer 13 · Mon Dec 11 2017 03:16:52 GMT+0800 (China Standard Time)

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

Jasper De Moor · Answer 14 · Mon Dec 11 2017 03:19:34 GMT+0800 (China Standard Time)

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

David Nagli · Answer 15 · Mon Dec 11 2017 03:20:17 GMT+0800 (China Standard Time)

Got it. Thanks for clearing that up :)

Jasper De Moor · Answer 16 · Mon Dec 11 2017 05:52:35 GMT+0800 (China Standard Time)

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

Sarah Federman · Answer 17 · Tue Dec 12 2017 05:28:27 GMT+0800 (China Standard Time)

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

Jasper De Moor · Answer 18 · Tue Dec 12 2017 05:33:09 GMT+0800 (China Standard Time)

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

Zameer Haque · Answer 19 · Fri Dec 29 2017 20:56:23 GMT+0800 (China Standard Time)

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?

Jasper De Moor · Answer 20 · Fri Dec 29 2017 21:37:28 GMT+0800 (China Standard Time)

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

Masataka Umamichi · Answer 21 · Wed Mar 14 2018 12:32:44 GMT+0800 (China Standard Time)

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

Stanley Nguyen · Answer 22 · Fri Apr 13 2018 03:24:36 GMT+0800 (China Standard Time)

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

Saad · Answer 23 · Fri Apr 27 2018 00:51:01 GMT+0800 (China Standard Time)

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.

Jasper De Moor · Answer 24 · Fri Apr 27 2018 00:53:34 GMT+0800 (China Standard Time)

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

Tobe Osakwe · Answer 25 · Wed Jun 06 2018 00:04:40 GMT+0800 (China Standard Time)

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

Jasper De Moor · Answer 26 · Wed Jun 06 2018 00:22:23 GMT+0800 (China Standard Time)

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