Parcel: Shared js file and missing style link

Created on 1 Dec 2018 · 24Comments · Source: parcel-bundler/parcel

🐛 bug report

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

package.json

"scripts": {
    "dev": "node build.js",
    "build": "node build.js"
}

build.js

const rimraf = require('rimraf');
const Bundler = require('parcel-bundler');
const Path = require('path');

rimraf(Path.join(__dirname, './dist') , () => {
    console.log('Removed dist folder');
});

if (process.env.NODE_ENV === 'production') {
    rimraf(Path.join(__dirname, './.cache') , () => {
        console.log('Removed cache folder');
    });
}

const entryFiles = [
    Path.join(__dirname, './src/index.html'),
    Path.join(__dirname, './src/index2.html')
];

const bundler = new Bundler(entryFiles);
bundler.on('bundled', (bundle) => {
    console.log("Bundling done");
});
bundler.bundle();

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport" />
    <title></title>
</head>
<body>
    <script src="./index.js"></script>
    <h1>Index.html</h1>
</body>
</html>

src/index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport" />
    <title></title>
</head>
<body>
    <script src="./index.js"></script>
    <h1>Index2.html</h1>
</body>
</html>

src/index.js

import './index.css'

src/index.css

body {
    background-color: red;
}

🤔 Expected Behavior

The same css file should be linked to both dist/index.html dist/index2.html

😯 Current Behavior

dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport">
    <title></title>
<link rel="stylesheet" href="/src.e31bb0bc.css"></head>
<body>
    <script src="/src.e31bb0bc.js"></script>
    <h1>Index.html</h1>
</body>
</html>

dist/index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport">
    <title></title>
</head>
<body>
    <script src="/src.e31bb0bc.js"></script>
    <h1>Index2.html</h1>
</body>
</html>

The css file is lined only to index.html and not to index2.html

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.10.3 |
| Node | 11.3.0 |
| npm/Yarn | npm 6.4.1 |
| Operating System |

Bug Confirmed Bug ✨ Parcel 2

Source

thezealousfool

👍7

Most helpful comment

any news?

Temp solution:

src/
├── pages/
│   ├── about.js
│   ├── about.html
│   ├── index.js
│   └── index.html
└── shared.js

src/shared.js

import "./styles.scss";
import "jquery/dist/jquery.slim.js";
import "bootstrap";

src/pages/about.js

import "../shared.js";

src/pages/about.html

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

src/pages/index.js

import "../shared.js";

src/pages/index.html

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

maximelebreton on 27 Jul 2019

👍12

All 24 comments

I've been digging a bit, and I've found where the bug occurs.

Here, the bundler rejects creating a new bundle for the index.js asset as a child of index2.html, since it's already been created as a child of index.html, and therefore is an entry point for the index.js bundle created at that point.

I'm not sure how to fix the issue, but at that point, somehow the asset must still be registered on the bundle, so that the lookup here can find it.

emilniklas on 7 Dec 2018

Any updates?

If I'm not mistaken, the current work around is to create an index for each entry point?
index-main.js for index.html
index-about.js for about.html

cliffasaurus on 4 Feb 2019

😕3 👍3 😄2

package any pug files meet the same issue.

codinggirl on 14 Mar 2019

any news?

Temp solution:

src/
├── pages/
│   ├── about.js
│   ├── about.html
│   ├── index.js
│   └── index.html
└── shared.js

src/shared.js

import "./styles.scss";
import "jquery/dist/jquery.slim.js";
import "bootstrap";

src/pages/about.js

import "../shared.js";

src/pages/about.html

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

src/pages/index.js

import "../shared.js";

src/pages/index.html

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

maximelebreton on 27 Jul 2019

👍12

I have the same issue. The solution that @maximelebreton suggested kind of helped me for now, but I prefer to keep all pages on the first layer of src/, so my structure looks like this:
src/ ├── assets/ │ └── ... ├── js-linkers/ │ ├── page2.js │ └── page3.js ├── index.html ├── index.js ├── page2.html └── page3.html
Where in index.js I have all asset imports, and if I want to create some other page, I add page2.html and link to an auxiliary page2.js file with the only line inside import '../index.js';.

Unfortunately you need to create the specific js linker file for an every new html page. It may make the src/ folder kind of messy, so I tidy up them to some folder. But at least for me the advantage will be that urls remain more obvious.

DZakh on 24 Oct 2019

👍1

@mischnic The original issue was reported more than a year ago. Any update so far?

sergeyzwezdin on 10 Jan 2020

👍3

@sergeyzwezdin I've just tested this with Parcel 2, it's fixed.
(Not sure if this was explained already, but Parcel 1 didn't allow any circles in the asset tree, so an asset couldn't be used in more than one bundle. Parcel 2 allows this just fine.)

mischnic on 27 Jan 2020

👍2

@mischnic When it's going to be published?

sergeyzwezdin on 28 Jan 2020

The current alpha version works as expected.

mischnic on 28 Jan 2020

❤2

@mischnic ok, but when it will be published as a stable version? I wouldn't like to use alpha.

sergeyzwezdin on 29 Jan 2020

The current alpha version works as expected.

Which one is it please? I've tried 2.0.0-nightly.85 - not working.

mataslib on 6 Feb 2020

@equistx Please provide a (small) code sample

mischnic on 6 Feb 2020

├── pages/
│   ├── page1.html
│   ├── page2.html
│   ├── index.js
│   ├── index.scss

index.js: import './index.scss';
index.scss: body {background: black;}
page1.html & page2.html inside body tag: <script src="index.js"></script>

cmd: parcel pages/*.html
localhost:1234/page1.html - has black body and css linked inside head tag
localhost:1234/page2.html - has not

mataslib on 6 Feb 2020

@mischnic I'm sorry and thank you, my fault, it is working. I've been using wrong version, because I had somehow parcel and parcel-bundle installed concurrently (not somehow rly, but because there is parcel-bundle in docs vs parcel in git installation guide - I see the difference now, didn't notice earlier). Of course, every cmd parcel command was related to parcel-bundle, instead of to parcel@alpha one.

Unfortunately I can't use working alpha, since HMR stopped working after I switched from parcel-bundle to parcel. Changes made inside @imported sass files are not detected therefore browser doesn't reload.

mataslib on 6 Feb 2020

As suggested here, I had to remove the main field in package.json and run parcel build src/**/*.html, and then they should all build.

brettinternet on 2 Mar 2020

👍1

Unfortunately I can't use working alpha, since HMR stopped working after I switched from parcel-bundle to parcel. Changes made inside @imported sass files are not detected therefore browser doesn't reload.

After some time, I got back to this. Unfortunately, issue is still there on 2.0.0-nightly.164. I found out that I was wrong, because changes are actually detected, rebuild happens, but it seems to be some kind of cache issue - when I use --no-cache, then it starts working as expected. But downside of this "hotfix" is, that rebuild takes 10x more time than before.

mataslib on 23 Mar 2020

sass

to be some kind of cache issue

-> https://github.com/parcel-bundler/parcel/issues/3708

mischnic on 6 Apr 2020

still having the same issue on the last 1.x version

matthacksteiner on 8 Jul 2020

how is it possible that such a foundational bug that prevents anyone from building multi-page sites hasen't been solver in almost two years?

azumbrunnen on 8 Jul 2020

👍8

I also have this issue best work around for me was to load the css as string and append it to the html myself using
import cssString from ‘bundle-text:./styles.css’

meodai on 9 Jul 2020

You're getting this with Parcel 2 as well?

mischnic on 9 Jul 2020

@micopc I am using 1.12.4 the latest stable. (just tried with v2 that has a temp problem "Name already registered with serializer") update2: does not work with NPM on v2 but does with yarn if this is any help

meodai on 9 Jul 2020

Doesn't solve the issue for me. If you have two simple documents pointing to one another, it will follow a.href and try to make sense of the other doc and fail.

if…

meodai.html links to home.html
or home.html links to meodai.html

it still produces unpredictable results with CSS and JS sometimes working and sometimes not. As soon as I have multiple files I start getting CSS error messages like "Uncaught SyntaxError: Unexpected token ':'.

azumbrunnen on 9 Jul 2020

Read this: #3008

One part of the issue might be connected with including inline style in html file/s.

Do not include any inline style in your html files!

Combining @maximelebreton solution and removing inline style elements solved my problems.

I am able to have multiple page setup with correctly included shared _css_ or _js_ files. For completeness here is my _package.json_ file, note that it does not require including the other pages (.html files) in any parcel script, it is enough to reference the page in a simple _href_ attribute, such as <a href="product.html">Product page</a>. Referencing the home or index page back from the product page works as well.

{
  "name": "my-app",
  "version": "0.0.1",
  "description": "super-duper",
  "keywords": [
    "fixed"
  ],
  "scripts": {
    "build": "parcel build index.html",
    "dev": "parcel index.html --open",
    "serve": "serve dist/",
    "start": "npm run build && npm run dev",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "serve": "^11.3.2"
  },
  "dependencies": {
    "aos": "^2.3.4"
  }
}

My starting project is html5boilerplate