domenkozar commented 5 years ago

🐛 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

domenkozar commented 5 years ago

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

domenkozar commented 5 years ago

Happens even with Node v10.9.0.

domenkozar commented 5 years ago

@MattCheely have you experienced this one?

MattCheely commented 5 years ago

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.

mischnic commented 5 years ago

Sometimes (usually after big changes)

There is no way to fix this without a reproduction

domenkozar commented 5 years ago

@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.

abread commented 5 years ago

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

domenkozar commented 5 years ago

@abread do you use Elm?

abread commented 5 years ago

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.

domenkozar commented 5 years ago

@abread any luck? :)

abread commented 5 years ago

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

jsoverson commented 5 years ago

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

domenkozar commented 5 years ago

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

mdevlamynck commented 5 years ago

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.

domenkozar commented 5 years ago

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

mdevlamynck commented 5 years ago

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=./

dustincoates commented 5 years ago

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

certainlyakey commented 5 years ago

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).

micksatana commented 4 years ago

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

kunaakos commented 4 years ago

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

codyseibert commented 4 years ago

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

vsnthdev commented 3 years ago

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 😬

orimdominic commented 3 years ago

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.

vsnthdev commented 3 years ago

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.

KokoDoko commented 3 years ago

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/

ericpascual commented 3 years ago

Same problem here.

I've followed the steps described in the article https://scotch.io/tutorials/using-parcel-in-a-vuejs-app and started the dev server as instructed (npm run dev).

Got a blank page with this error message in the console: Uncaught SyntaxError: Unexpected token '<'

Context:

node : 14.5.0
npm: 6.14.9
parcel: 1.12.4
OS: Linux Mint 19.3

[EDIT] Running parcel build revealed that there was a version incompatibility somewhere: vue package version was v2.6.11 while vue-template-compiler one was v2.6.12. I didn't installed vue explicitly, since not told so in the article referenced above. Upgrading vue to v2.6.12 (and thus adding an explicit dependency in package.json) made the build run successfully. The syntax error error disappeared too when running parcel in dev mode afterwards.

I don't know if it's only temporarily or if the problem is fixed for good.

jzohrab commented 3 years ago

Same issue, the js path is actually serving html (curl https://localhost:1234/index.html and curl https://localhost:1234/app.12345.js both return HTML). The generated artifacts appear to be fine.

$ node -v = v14.16.0
$ npm -v = 6.14.11
$ parcel --version = 1.12.5

On mac 10.15.7

Mine is a small project with few files.

I worked around this by having two separate builds, one for dev and one for prod (a github pages site):

    "start": "parcel src/index.html --out-dir dev",
    "build": "parcel build src/index.html --out-dir docs --public-url ./"

With this it works fine for me in both dev and prod.

MohamedElmdary commented 3 years ago

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>

DanFessler commented 3 years ago

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

georgianasch commented 3 years ago

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

ericpascual commented 3 years ago

@GeorgianaSchipor Outch, this is a bit frightening WRT the deterministic aspect of the process.

Did you repeat the same test on even and odd days to check if this could change something ? ;p

Sorry, I couldn't resist, but my first reaction resumes my overall feeling.

quaos commented 2 years ago

Still got this randomly in 2022. 🙄

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

timkolm commented 2 years ago

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

jorishr commented 1 year ago

It's 2023 now and I also ran into this frustrating issue after adding several new pages to my web app that share the same JS bundle. After sifting through the ParcelJs docs I pinned it down to changing the script-tag types from "type="text/javascript" to type="module" in my HTML pages. Issue resolved.

Shared Bundles Classic scripts

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

devinvestidor commented 1 year ago

The same problem here. I am receiving this msg:

Uncaught SyntaxError: Unexpected token '<' (at aula1.js:1:1)

aula1 is a html file and parcel convert to js??? I tried all posibility but I didn't have successufull.

<h4 class="title"><a href="aula1.html">#01 - Introdução</a></h4>

nazarioa commented 6 months ago

I am running into this issue... I am trying to update an old repo. When running Mac OS: 14.4.1 M2 node: v20.11.1 npm: 10.5.2

when running npm run dev which maps to "dev": "parcel ./src/index.html --no-cache", and I have removed all code in my HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bill & Ted</title>
</head>
<body>
<div id="hud">Poop</div>
</body>
</html>

and this is my package.json

{
  "name": "bill-and-ted",
  "version": "1.0.0",
  "description": "",
  "source": "src/index.html",
  "browserslist": [
    "defaults and fully supports es6-module",
    "maintained node versions"
  ],
  "scripts": {
    "build": "parcel build ./src/index.html --dist-dir ./dist",
    "dev": "parcel ./src/index.html --no-cache",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-reset-and-normalize-sass": "^0.1.2"
  },
  "devDependencies": {
    "@parcel/transformer-sass": "^2.12.0",
    "parcel": "^2.12.0"
  },
  "staticFiles": {
    "staticPath": [
      {
        "staticPath": "data",
        "staticOutDir": "/"
      }
    ]
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "rules": {
    "semi": 2
  },
  "eslintConfig": {
    "env": {
      "browser": true,
      "node": true
    }
  },
  "engines": {
    "node": "20"
  }
}

parcel-bundler / parcel

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

🐛 bug report

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

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment