parcel: Shared js file and missing style link

🐛 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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 9
Comments: 30 (7 by maintainers)

Commits related to this issue

Attempt to fix #2340 — committed to emilniklas/parcel by deleted user 6 years ago

Most upvoted comments

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?

+17

azumbrunnen on Jul 8, 2020

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>

+14

maximelebreton on Jul 27, 2019

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

+10

cliffasaurus on Feb 4, 2019

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

sergeyzwezdin on Jan 10, 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 Feb 6, 2020

The current alpha version works as expected.

mischnic on Jan 28, 2020

@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 Jan 27, 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 Mar 2, 2020

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.

DZakh on Oct 24, 2019