Parcel: Parcel renders javascript file as html (SyntaxError: Unexpected token <)

Created on 27 Mar 2019 · 25Comments · Source: parcel-bundler/parcel

🐛 bug report

Sometimes (usually after big changes), HMR reloads the page and it breaks.
Turns out the javascript file included into html is the same as the html itself so it fails to parse it.

🎛 Configuration (.babelrc, package.json, cli command)

{
  "name": "frontend",
  "version": "0.0.1",
  "description": "",
  "scripts": {
    "build": "parcel build index.html",
    "serve": "parcel serve -p 12345 index.html",
    "clean": "rm -rf {dist,.cache,node_modules}",
    "reinstall": "yarn clean && npm i"
  },
  "devDependencies": {
    "elm-hot": "^1.0.1",
    "node-elm-compiler": "^5.0.3"
  },
  "dependencies": {
    "parcel-bundler": "^1.12.2",
    "fomantic-ui-css": "^2.7.2"
  }
}

🤔 Expected Behavior

HMR renders the page correctly

😯 Current Behavior

💁 Possible Solution

🔦 Context

Could be something wrong in Elm asset handling or in Parcel in general.

💻 Code Sample

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.12.2
| Node | 8.14.1
| npm/Yarn | 1.9.4
| Operating System | Linux/NixOS

Bug

Source

domenkozar

👍10

Most helpful comment

Getting the same bug I think! I'm using the Bundler API. Just setting up a project so it's a minimal setup with an index.html and an index.js file in a script tag, as seen in the documentation examples.

If I add publicUrl: './' to the options object, the contents of the js bundle will be the same as the generated html file. If there's no publicUrl in the config, everything works as expected.

I'm using babel-node 7.7.4 to execute the module that calls Bundler, node v12.14.1, parcel 1.12.4

kunaakos on 5 Feb 2020

👍3

All 25 comments

Could be due to very old node, going to see if I can reproduce on 10.X

domenkozar on 27 Mar 2019

Happens even with Node v10.9.0.

domenkozar on 28 Mar 2019

@MattCheely have you experienced this one?

domenkozar on 28 Mar 2019

I think I've seen that error before where you get html instead of an index file, but not in the context described. I wonder if it's related to something I looked at a while ago where initial builds with compiler errors don't re-build correctly after errors are fixed.

MattCheely on 28 Mar 2019

Sometimes (usually after big changes)

There is no way to fix this without a reproduction

mischnic on 30 Mar 2019

@mischnic yes, I realize this issue is a long shot. I wish a had a clearer case to reproduce, but since this a bigger codebase it's hard to isolate what's going on.

I was mainly interested to see if anyone else is experiencing and whether it's related to Elm or not.

domenkozar on 30 Mar 2019

👍3

I'm experiencing the same issue. It seems to happen when I change my only stylesheet (.css).

abread on 4 Apr 2019

👍1

@abread do you use Elm?

domenkozar on 4 Apr 2019

No, the only plug-in I'm using is the TypeScript one. The project is not that big, so I'll try in a few days to get it reproduced in a small codebase.

abread on 4 Apr 2019

👍1

@abread any luck? :)

domenkozar on 16 Apr 2019

Problem seems to have disappeared without me doing anything :(
If I encounter it again I'll be sure to try identifying what caused it.

abread on 16 Apr 2019

This happens somewhat frequently to me as well but I can't reliably reproduce it. It seems related to using --public-url=. on my setup. Tried node 10.13.0 and 11.14.0

jsoverson on 22 Apr 2019

Note that I'm not setting --public-url and still get this (only noticed with live server, never at regular build).

domenkozar on 24 Apr 2019

I also encountered this issue. I'm using elm and this only happens from time to time after I fix a build error (seems similar to what @MattCheely described). I'll try to find a way to reproduce it but it might be somewhat challenging.

mdevlamynck on 31 May 2019

👍1

@mdevlamynck did you find something? I think this is the only bug I have with Parcel, but it's really annoying :)

domenkozar on 9 Jul 2019

I haven't been able to consistently reproduce it when it happens after a failed build yet, but I found a consistent way to reproduce the bug when using --public-url. I'm using npm v6.10.0 and node v11.15.0.

To reproduce the --public-url case:

run:

mkdir parcel1 ; cd parcel1
npm init -y ; npm i parcel-bundler --save -y

index.html:

<html>
  <body>
    <main></main>
    <script src="./index.js"></script>
  </body>
</html>

index.js:

alert('test');

run:

parcel serve index.html --public-url=./

mdevlamynck on 9 Jul 2019

I have the same issue. I'm using Pug, stylus, and Typescript.

I can reproduce it reliably:

Started serving with empty index.styl and get this error: Cannot read property 'render' of nul
Add something to index.styl (namely setting the background of the body to red)
Error occurs

dustincoates on 20 Aug 2019

I have the same problem as @dustincoates. A very small postcss config with this error appearing after a build error and a repeated save of any file (without fixing the error).

certainlyakey on 1 Sep 2019

In my case, I was using index.js in script tag and service with flag --public-url http://localhost:1234

parcel serve -p 1234 app/index.html --public-url http://localhost:1234



md5-f8e3bc32dbe5d6948257523e270bf0b9





md5-8a35b6ea9f23cb96c08bdf2e9dc2d7c6



parcel serve -p 1234 app/index.html



md5-989b8a96f777d660b387f8fd4b5365d2





md5-47289e523fe4bdaf3e72abe04d9d65b8

ps. Tested on Windows 10 powershell, Node 12.4, Parcel 1.12.4

micksatana on 21 Jan 2020

👍1

If I add publicUrl: './' to the options object, the contents of the js bundle will be the same as the generated html file. If there's no publicUrl in the config, everything works as expected.

I'm using babel-node 7.7.4 to execute the module that calls Bundler, node v12.14.1, parcel 1.12.4

kunaakos on 5 Feb 2020

👍3

I just got this issue randomly. I had to stop and restart parcel to fix it.

codyseibert on 12 Aug 2020

I am also getting the exact same issue without having --public-url. Tried adding --public-url 'http://localhost:2020' and it didn't work. I am using 👇

Modules

SASS
PostCSS
PostHTML

Versions
Parcel: 2.0.0-nightly.467
Node: v15.3.0
Yarn: 1.22.5
OS: Darwin 10.15.7

Update 1: @mischnic Is there any workaround to it? I tried upgrading to the latest nightly in hope of fixing the issue as soon as possible. Because I'm using TailwindCSS, I have to constantly edit HTML, and every time this breaks 😬

vasanthdeveloper on 3 Dec 2020

👍1

I am also getting the exact same issue without having --public-url.

  "devDependencies": {
    "@babel/core": "^7.0.0",
    "parcel": "^2.0.0-beta.1",
    "prettier": "^2.0.5",
    "sass": "^1.26.10"
  },
  "dependencies": {
    "aos": "^2.3.4",
    "autoprefixer": "^9",
    "jquery": "^3.5.1",
    "postcss-cli": "^8.3.0",
    "purgecss": "^3.0.0",
    "slick-carousel": "^1.8.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  }

Versions
Parcel: 2.0.0-nightly.467
Node: v12.18.4
Yarn: 1.22.5
OS: Linux(Ubuntu) 18

It's quite hard to figure out what the cause is. Sometimes, I just don't see this error.
This error prevents auto-page refresh on saved code changes. One will have to refresh the page manually when this error occurs.
I've tried deleting the parcel-cahce folder and dist folder but the error is still persistent.

sudo-kaizen on 8 Dec 2020

On every build, I delete .parcel-cache and use --no-cache flag on both serve and build commands. I am still constantly getting the error.

vasanthdeveloper on 8 Dec 2020

👍1

Same problem here. Just installing a clean react project with parcel, and I immediately get this error. I am following this blog post, as linked from the official parcel site: https://blog.jakoblind.no/react-parcel/