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.

Sign up for GitHub

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

Jump to bottom

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

Closed
andy0130tw opened this issue May 9, 2019 · 6 comments
Closed

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

andy0130tw opened this issue May 9, 2019 · 6 comments
Labels
❔ Question

Comments

@andy0130tw
Copy link

andy0130tw commented May 9, 2019 •
edited
Loading

🐛 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
@andy0130tw andy0130tw changed the title Parcel injects a bogus script tag when a link to an HTML page involving inline CSS Parcel injects a bogus script tag when a link points to an HTML page involving inline CSS May 9, 2019
@mischnic
Copy link
Member

mischnic commented May 11, 2019 •
edited
Loading

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

@DeMoorJasper
Copy link
Member

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

@andy0130tw
Copy link
Author

andy0130tw commented May 11, 2019 •
edited
Loading

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

@github-actions
Copy link

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 github-actions bot added the Stale Inactive issues label Jan 18, 2020
@github-actions github-actions bot closed this as completed Feb 3, 2020
@chuckntaylor
Copy link

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?

@github-actions github-actions bot removed the Stale Inactive issues label Jun 19, 2020
@BigPackie BigPackie mentioned this issue Sep 22, 2020
Closed
@fis-cz
Copy link

fis-cz commented Oct 29, 2022

Why this is closed when no answer has been provided?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
❔ Question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@DeMoorJasper @mischnic @andy0130tw @chuckntaylor @fis-cz