Shared js file and missing style link #2340

thezealousfool · 2018-12-01T15:06:45Z

🐛 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

emilniklas · 2018-12-07T11:01:04Z

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.

cliffasaurus · 2019-02-04T12:12:30Z

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

codinggirl · 2019-03-14T02:44:18Z

package any pug files meet the same issue.

maximelebreton · 2019-07-27T11:22:16Z

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>

DZakh · 2019-10-24T18:33:00Z

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:

├── 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.

sergeyzwezdin · 2020-01-10T17:02:17Z

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

mischnic · 2020-01-27T22:43:21Z

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

sergeyzwezdin · 2020-01-28T01:24:44Z

@mischnic When it's going to be published?

mischnic · 2020-01-28T08:26:11Z

The current alpha version works as expected.

sergeyzwezdin · 2020-01-29T03:11:07Z

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

mataslib · 2020-02-06T15:15:49Z

The current alpha version works as expected.

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

mischnic · 2020-02-06T15:19:49Z

@equistx Please provide a (small) code sample

mataslib · 2020-02-06T15:37:36Z

├── 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 · 2020-02-06T16:00:46Z

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

brettinternet · 2020-03-01T23:50:34Z

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.

mataslib · 2020-03-23T11:54:49Z

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.

mischnic · 2020-04-06T11:07:17Z

sass

to be some kind of cache issue

-> #3708

matthacksteiner · 2020-07-08T06:06:54Z

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

azumbrunnen · 2020-07-08T21:12:34Z

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?

meodai · 2020-07-08T22:44:10Z

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’

mischnic · 2020-07-08T22:50:55Z

You're getting this with Parcel 2 as well?

meodai · 2020-07-08T23:11:41Z

@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

azumbrunnen · 2020-07-08T23:43:23Z

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 ':'.

BigPackie · 2020-09-22T17:34:31Z

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

etrielQ · 2021-05-05T11:15:56Z

problem still not solved?

Obizim · 2021-05-29T10:25:31Z

Till now, there is still no specific fix for this issue. Wild

devongovett · 2021-07-18T03:56:55Z

This should already be working in Parcel 2.

shasherazi · 2023-02-22T18:52:15Z

It is unbelievable that a bug this bad still isn't solved even 4 years later.

devongovett · 2023-02-22T19:12:48Z

Please provide a reproduction.

shasherazi · 2023-02-22T19:14:50Z

My bad; I thought this issue was causing me problems. I think it's another problem. I'm creating an issue for that.

DeMoorJasper added the 🐛 Bug label Dec 1, 2018

emilniklas pushed a commit to emilniklas/parcel that referenced this issue Dec 7, 2018

Attempt to fix parcel-bundler#2340

8c0195d

emilniklas mentioned this issue Dec 7, 2018

Attempt to fix #2340 #2372

Closed

3 tasks

mischnic mentioned this issue Jan 6, 2019

Linking to second entry point removes styling #2386

Closed

mischnic changed the title ~~Shared js file~~ Shared js file and missing style link Jan 6, 2019

mischnic added the ✔️ Confirmed Bug label Jan 18, 2019

mischnic mentioned this issue Jan 18, 2019

Multiple html entrys not shared css assets #1441

Closed

mischnic mentioned this issue Mar 5, 2019

Issue with import and dynamic import #2546

Closed

mischnic mentioned this issue Apr 1, 2019

Importing SVG image succeeds in building, but fails at run time #2863

Closed

mischnic added the ✨ Parcel 2 label Apr 1, 2019

marc136 mentioned this issue Apr 5, 2019

HMR for CSS doesn't refresh on subsequent entry pages and can also throw an error #1931

Closed

mischnic mentioned this issue May 13, 2019

CSS Link Not Shared on other html pages #3020

Closed

chocolateboy mentioned this issue Aug 21, 2019

Styles are included only in single page while extending template chocolateboy/parcel-plugin-nunjucks#27

Closed

mischnic mentioned this issue Aug 26, 2019

Styles are not included if used on multiple pages #3447

Closed

mischnic mentioned this issue May 22, 2020

Styles not being update when using SCSS partials on different HTML page #4570

Closed

mischnic mentioned this issue Jun 6, 2020

Missing stylesheet from multiple entry files building for production #4702

Closed

This was referenced Nov 17, 2020

Headers RuslanaLogosha/Filmoteka#1

Merged

Our team RuslanaLogosha/Filmoteka#11

Merged

devongovett closed this as completed Jul 18, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Shared js file and missing style link #2340

Shared js file and missing style link #2340

thezealousfool commented Dec 1, 2018

emilniklas commented Dec 7, 2018

cliffasaurus commented Feb 4, 2019

codinggirl commented Mar 14, 2019

maximelebreton commented Jul 27, 2019 •

edited

Loading

DZakh commented Oct 24, 2019 •

edited

Loading

sergeyzwezdin commented Jan 10, 2020

mischnic commented Jan 27, 2020 •

edited

Loading

sergeyzwezdin commented Jan 28, 2020

mischnic commented Jan 28, 2020

sergeyzwezdin commented Jan 29, 2020

mataslib commented Feb 6, 2020

mischnic commented Feb 6, 2020

mataslib commented Feb 6, 2020 •

edited

Loading

mataslib commented Feb 6, 2020 •

edited

Loading

brettinternet commented Mar 1, 2020 •

edited

Loading

mataslib commented Mar 23, 2020

mischnic commented Apr 6, 2020

matthacksteiner commented Jul 8, 2020

azumbrunnen commented Jul 8, 2020 •

edited

Loading

meodai commented Jul 8, 2020

mischnic commented Jul 8, 2020 •

edited

Loading

meodai commented Jul 8, 2020 •

edited

Loading

azumbrunnen commented Jul 8, 2020 •

edited

Loading

BigPackie commented Sep 22, 2020 •

edited

Loading

etrielQ commented May 5, 2021

Obizim commented May 29, 2021

devongovett commented Jul 18, 2021

shasherazi commented Feb 22, 2023

devongovett commented Feb 22, 2023

shasherazi commented Feb 22, 2023

Shared js file and missing style link #2340

Shared js file and missing style link #2340

Comments

thezealousfool commented Dec 1, 2018

🐛 bug report

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

package.json

build.js

src/index.html

src/index2.html

src/index.js

src/index.css

🤔 Expected Behavior

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

😯 Current Behavior

dist/index.html

dist/index2.html

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

🌍 Your Environment

emilniklas commented Dec 7, 2018

cliffasaurus commented Feb 4, 2019

codinggirl commented Mar 14, 2019

maximelebreton commented Jul 27, 2019 • edited Loading

DZakh commented Oct 24, 2019 • edited Loading

sergeyzwezdin commented Jan 10, 2020

mischnic commented Jan 27, 2020 • edited Loading

sergeyzwezdin commented Jan 28, 2020

mischnic commented Jan 28, 2020

sergeyzwezdin commented Jan 29, 2020

mataslib commented Feb 6, 2020

mischnic commented Feb 6, 2020

mataslib commented Feb 6, 2020 • edited Loading

mataslib commented Feb 6, 2020 • edited Loading

brettinternet commented Mar 1, 2020 • edited Loading

mataslib commented Mar 23, 2020

mischnic commented Apr 6, 2020

matthacksteiner commented Jul 8, 2020

azumbrunnen commented Jul 8, 2020 • edited Loading

meodai commented Jul 8, 2020

mischnic commented Jul 8, 2020 • edited Loading

meodai commented Jul 8, 2020 • edited Loading

azumbrunnen commented Jul 8, 2020 • edited Loading

BigPackie commented Sep 22, 2020 • edited Loading

etrielQ commented May 5, 2021

Obizim commented May 29, 2021

devongovett commented Jul 18, 2021

shasherazi commented Feb 22, 2023

devongovett commented Feb 22, 2023

shasherazi commented Feb 22, 2023

maximelebreton commented Jul 27, 2019 •

edited

Loading

DZakh commented Oct 24, 2019 •

edited

Loading

mischnic commented Jan 27, 2020 •

edited

Loading

mataslib commented Feb 6, 2020 •

edited

Loading

mataslib commented Feb 6, 2020 •

edited

Loading

brettinternet commented Mar 1, 2020 •

edited

Loading

azumbrunnen commented Jul 8, 2020 •

edited

Loading

mischnic commented Jul 8, 2020 •

edited

Loading

meodai commented Jul 8, 2020 •

edited

Loading

azumbrunnen commented Jul 8, 2020 •

edited

Loading

BigPackie commented Sep 22, 2020 •

edited

Loading