Skip to content
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 · Fixed by #157
Closed

Unable to build index.html #8

azharkhan opened this issue Dec 5, 2017 · 26 comments · Fixed by #157

Comments

@azharkhan
Copy link

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
Copy link

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

@azharkhan
Copy link
Author

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

@devongovett
Copy link
Member

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
Copy link

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
Copy link
Author

amazing! thanks so much @devongovett

@devongovett
Copy link
Member

Going to reopen to track this issue.

@svenheden
Copy link

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
Copy link
Contributor

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>

@g3r4n
Copy link

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
Copy link
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
Copy link
Contributor

davidnagli commented Dec 10, 2017

Waiting on #145 to be implemented

Edit: PR #157

@DeMoorJasper
Copy link
Member

@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
Copy link
Contributor

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

@DeMoorJasper
Copy link
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
Copy link
Contributor

davidnagli commented Dec 10, 2017

Got it. Thanks for clearing that up :)

@DeMoorJasper
Copy link
Member

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

@sarahbethfederman
Copy link

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
Copy link
Member

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

@haquezameer
Copy link

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
Copy link
Member

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

@umamichi
Copy link

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
Copy link

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
Copy link

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
Copy link
Member

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

@thosakwe
Copy link

thosakwe commented Jun 5, 2018

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

@DeMoorJasper
Copy link
Member

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.
Projects
None yet
Development

Successfully merging a pull request may close this issue.