Parcel: 🐛 [Question] Importing .css file in .js file makes codes that are after the import statement run infinitely.

Created on 10 Dec 2017 · 8Comments · Source: parcel-bundler/parcel

Hi, snowy cold day here today.
I have two questions.

Here is my project directory, app's structure. It's simple.

app/index.html
app/style.css
app/index.js
app/index.css

index.html

<html>
<head>
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>1</div>
  <script src="./index.js"></script>
</body>
</html>

style.css

div {
  background-color: blue;
}

index.js

import fs from 'fs';
const string = fs.readFileSync('.' + '/index.css', 'utf8');

console.log("hello world");
console.log("bye-bye world");

index.css

div {
  display: block;
  width: 100px;
  height: 100px;
}

I typed 'parcel index.html' on the command line and it worked fine.
I found console logs, one 'hello world' and one 'bye-bye world.'
I also found 'index.css' at built js file as a variable, 'string'.

Then I modified 'index.js' as follow

import indexStyle from './index.css';

console.log("hello world");
console.log("byebye world");

After doing that the logs are printed out on the console again and again, infinitely, until the following error message came out.

parcel_test.js:37 Uncaught RangeError: Maximum call stack size exceeded
    at localRequire (parcel_test.js:37)
    at Object.eval (eval at hmrApply (parcel_test.js:158), <anonymous>:5:14)
    at newRequire (parcel_test.js:46)
    at hmrAccept (parcel_test.js:182)
    at getParents.some.id (parcel_test.js:190)
    at Array.some (<anonymous>)
    at hmrAccept (parcel_test.js:190)
    at getParents.some.id (parcel_test.js:190)
    at Array.some (<anonymous>)
    at hmrAccept (parcel_test.js:190)

Is it a bug or something or just my fault?
And I don't understand what benefits is in importing a CSS file in a js file.

Sorry for my lack of knowledge. I'm a newbie at front-end development and at English writing.
I don't want to bother anybody. But I strongly want to know more.
Would you please help me?

| Software | Version(s)
| ---------------- | ----------
| Parcel | 1.1.0
| Node | 8.4.0
| npm/Yarn | 5.3.0
| Operating System | Windows10

Bug Confirmed Bug HMR

Source

march23hare

Most helpful comment

@march23hare to answer this:

And I don't understand what benefits is in importing a CSS file in a js file.

If you leave your index.js as this:

import indexStyle from './index.css';

console.log("hello world");
console.log("byebye world");

And update your index.css to this:

html {
    font-size: 40px;
    color: purple;
}

And then bundle / open the page in the browser, you'll notice that index.css has been added to your page as a stylesheet via the import without having to add it to your HTML.

brandon93s on 10 Dec 2017

👍2

All 8 comments

I was able to recreate the scenario mentioned above. This appears to be an issue with hmr and not with the bundling itself. When you save the file after making the change, with the page already loaded in the browser, it executes repeatedly until Maximum call stack size exceeded. Hard refreshing the page or executing parcel index.html does not have the issue.

brandon93s on 10 Dec 2017

👍1

@march23hare to answer this:

And I don't understand what benefits is in importing a CSS file in a js file.

If you leave your index.js as this:

import indexStyle from './index.css';

console.log("hello world");
console.log("byebye world");

And update your index.css to this:

html {
    font-size: 40px;
    color: purple;
}

And then bundle / open the page in the browser, you'll notice that index.css has been added to your page as a stylesheet via the import without having to add it to your HTML.

brandon93s on 10 Dec 2017

👍2

Thank you a lot, brandon93.
It's helpful!

march23hare on 10 Dec 2017

Isn’t this still a bug with HMR?