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

🐛 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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 14
Comments: 37 (1 by maintainers)

Commits related to this issue

Workaround: disable disk-cache for "yarn dev". - parcel 2 alpha seems to have a problem with disk caching: https://github.com/parcel-bundler/parcel/issues/2855 and https://github.com/parcel-bundl... — committed to moreonion/audiofile by alex-mo 4 years ago
Bug fix: https://github.com/parcel-bundler/parcel/issues/2855 Clean up: package.json Upgrade dev dependency: ParcelJs v2 — committed to jorishr/liondigits by jorishr a year ago

Most upvoted comments

Still got this randomly in 2022. 🙄

Parcel v2.0.1
React v17.0.1
Node v14.17.5
Mac OS X v10.14.6

+10

quaos on Mar 4, 2022

@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 Mar 30, 2019

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 Feb 5, 2020

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

<script src="index.js"></script>

So after changed to ./index.js, and remove --public-url http://localhost:1234, it works

parcel serve -p 1234 app/index.html

<script src="./index.js"></script>

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

micksatana on Jan 21, 2020

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 May 31, 2019

In my case empty <head></head> was causing the problem.

timkolm on Aug 15, 2022

What worked for me is to randomly switch the node versions using nvm. I was using node v14.15.0 when my app stopped working because of this “Unexpected token” error

I switched to v12.17.0 -> it worked
I switched back to v14.15.0 -> it worked

georgianasch on Sep 8, 2021

The only thing that worked for me was removing style tags from head like @MohamedElmdary suggested.

DanFessler on Sep 6, 2021

I fixed this issue by removing <style> tags from html <head>

Example:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home Page</title>
    <link rel="stylesheet" href="./assets/css/base.css" />

    <!-- SyntaxError: Unexpected token < -->
    <style>
      a {
        font-size: 1.8rem;
      }
    </style>
    <!-- SyntaxError: Unexpected token < -->
  </head>
  <body>
    <a href="./login.html">Login</a>
    <a href="./register.html">Register</a>
    </main>
  </body>
</html>

<!-- login.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login Page</title>
    <link rel="stylesheet" href="./assets/css/base.css" />

    <!-- SyntaxError: Unexpected token < -->
    <style> 
      a {
        font-size: 1.8rem;
      }
    </style>
    <!-- SyntaxError: Unexpected token < -->
  </head>
  <body>
    <a href="./index.html">Home Page</a>
    <a href="./register.html">Register</a>
    </main>
  </body>
</html>

  <!-- register.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Register Page</title>
    <link rel="stylesheet" href="./assets/css/base.css" />

    <!-- SyntaxError: Unexpected token < -->
    <style>
      a {
        font-size: 1.8rem;
      }
    </style>
    <!-- SyntaxError: Unexpected token < -->
  </head>
  <body>
    <a href="./index.html">Home Page</a>
    <a href="./login.html">Login</a>
    </main>
  </body>
</html>

MohamedElmdary on May 28, 2021

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/

KokoDoko on Dec 10, 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.

vsnthdev on Dec 8, 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 😬

vsnthdev on Dec 6, 2020

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 Jul 9, 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 Apr 4, 2019

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

abread on Apr 4, 2019