Parcel: Parcel injects a bogus script tag when a link points to an HTML page involving inline CSS

Created on 9 May 2019 · 5Comments · Source: parcel-bundler/parcel

🐛 bug report

Parcel incorrectly injects a bogus script tag to a page which contains a link to an HTML page that involves inline CSS. When loading this page, the browser will try to load the non-existent resource, receiving a 404. See the following sample code.

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

No extra configs.

🤔 Expected Behavior

No script tags should be inserted.

😯 Current Behavior

As the sample code.

💁 Possible Solution

Inline CSS should not need an extra script file, unlike CSS stylesheets.

🔦 Context

N/A

💻 Code Sample

For example, there are two files:

The main page, index.html:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body style="font-size: 24px">
    <a href="register.html">AARRR</a>
  </body>
</html>

Which has a link to the other page, register.html:

<!DOCTYPE html>
<div style="display: none">you can't see me</div>

Then use parcel index.html to generate a (dev) bundle. The source of index.html is as follows:

<!DOCTYPE html>
<html>
  <head>
  <script src="/register.js"></script></head>
  <body style="font-size: 24px">
    <a href="/register.html">AARRR</a>
  </body>
</html>

Despite the fact that there is obviously no register.js. Note that when building with parcel build index.html, the bundle is perfectly fine.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.12.3
| Node | 10.15.2
| npm/Yarn | 6.8.0
| Operating System | Ubuntu 19.04

Question

Source

andy0130tw

👍3

Most helpful comment

First of all, thanks @mischnic for pointing out that the extra script file is meant for HMR. Producing that file is an expected behavior. However, my issue is that the file is not generated in certain conditions.

I am sorry for not being careful enough to fully describe my issue. To trigger this bug, the index.html must also contain some inline styles (I also updated the source at top):

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body style="font-size: 24px">
    <a href="register.html">AARRR</a>
  </body>
</html>

Building with parcel index.html gives the following error:

2019-05-12 02-04-59 的螢幕擷圖

This differs from the output I originally posted. Actually I invoked parcel with multiple entry points. If there were another blank page, dummy.html in the same directory, and I had built it with parcel index.html dummy.html, then the error would be "404 (not found)".

andy0130tw on 11 May 2019

👍4

All 5 comments

@andy0130tw That JS file is added to provide hot reloading (update the page) as you make changes to your source files.
You can disable that feature using parcel --no-hmr index.html

That JS file contains: builtins/bundle-url.js, builtins/css-loader.js, builtins/hmr-runtime.js.

There is no JS file with parcel index.html --no-hmr.

I guess the JS asset emitted by CSSAsset creates a JS bundle and hmr gets added to that.
Without HMR, it gets optimized away?

@DeMoorJasper Not sure if I would call this a bug. This is actually an edge case where HMR does indeed get injected without an explicit script file (#943).

mischnic on 11 May 2019

@mischnic didn't actually read the bug report in detail just added a tag to it.
It's indeed expected behaviour

DeMoorJasper on 11 May 2019

I am sorry for not being careful enough to fully describe my issue. To trigger this bug, the index.html must also contain some inline styles (I also updated the source at top):

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body style="font-size: 24px">
    <a href="register.html">AARRR</a>
  </body>
</html>

Building with parcel index.html gives the following error:

2019-05-12 02-04-59 的螢幕擷圖

andy0130tw on 11 May 2019

👍4

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.

github-actions[bot] on 18 Jan 2020

I have this same issue. I make use of parcel-plugin-inline-source to inline some of my css for faster initial page load. This gives me the same issues as soon as I link to another page. Is there really no way to inline css without --no-hmr?