parcel: Unable to `build` index.html

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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 11
Comments: 26 (14 by maintainers)

Most upvoted comments

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

+21

devongovett on Dec 5, 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.

+10

svenheden on Dec 6, 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.

marcioj on Dec 8, 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"
        ]
      }
    }
  }
}

konsumer on Dec 5, 2017

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

stanleynguyen on Apr 12, 2018

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

DeMoorJasper on Dec 10, 2017