Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HTML bundles must only contain one asset

See original GitHub issue

❔ Question

Has there been any changes to parcel from 1->2 which disable usage of different kind of file extensions in one file? Maybe somebody know what exactly this message wants to tell me so i can change it? unsure if this is a bug or just me.

🔦 Context

My Project uses pug and ES6 imports. I would get you more info but “–log-level verbose” gives me the same error using this: parcel index.pug --log-level verbose

V1 compiled fine, i changed to V2 to get ES6 imports working because script(defer='', type="module", src='/js/main.js') seem to not be loaded correctly in broswer because of pracelRequire.

I tried streamlining so i only use one kind of asset per type (sass => scss for ex.) didnt change the error for me.

💻 Code Sample

ben@EdenTheFourthVII:~/Projekte/Kunde/Heimatvoll/Server2/frontend$ parcel index.pug 
Server running at http://localhost:1234
🚨 @parcel/packager-html: HTML bundles must only contain one asset
AssertionError [ERR_ASSERTION]: HTML bundles must only contain one asset
    at Object.package (/home/ben/.nvm/versions/node/v12.10.0/lib/node_modules/parcel/node_modules/@parcel/packager-html/lib/H
TMLPackager.js:34:21)
    at PackagerRunner.package (/home/ben/.nvm/versions/node/v12.10.0/lib/node_modules/parcel/node_modules/@parcel/core/lib/Pa
ckagerRunner.js:214:36)
    at async PackagerRunner.getBundleResult (/home/ben/.nvm/versions/node/v12.10.0/lib/node_modules/parcel/node_modules/@parc
el/core/lib/PackagerRunner.js:182:20)
    at async PackagerRunner.packageAndWriteBundle (/home/ben/.nvm/versions/node/v12.10.0/lib/node_modules/parcel/node_modules
/@parcel/core/lib/PackagerRunner.js:151:9)
    at async Child.handleRequest (/home/ben/.nvm/versions/node/v12.10.0/lib/node_modules/parcel/node_modules/@parcel/workers/
lib/child.js:162:9)

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-alpha.3.2
Node	12.10.0
npm/Yarn	npm@6.10.3
Operating System	KDE Neon (User:18)

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:23 (9 by maintainers)

Top GitHub Comments

9reactions

andreidmtcommented, Apr 9, 2020

I’m getting the same error with the default scenario:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="react-root"></div>
    <script src="./index.jsx"></script>
  </body>
</html>

If I remove the css from index.html and import it in index.jsx with import "./index.css", it works as intended.

Env

Software	Version(s)
Parcel	2.0.0-alpha.3.2
Node	12.13.1
npm/Yarn	npm@6.14.2
Operating System	Arch Linux x86_64

0reactions

andregscommented, Jul 26, 2021

Hi, @devongovett! I know https://github.com/parcel-bundler/parcel/pull/6574 fixed this issue, but why does Parcel add that inline <script> to the html, as mentioned here in https://github.com/parcel-bundler/parcel/issues/3875#issuecomment-864510847?

Using the prefix blundle-text: in Parcel 2.0.0-beta.2 I got this strange HTML:

<link rel="stylesheet" href="/index.d1a4d2be.css">
<div>no no no no no</div><script src="// modules are defined as an array
// [ module function, map of requires ]
//
// map of requires is short require name -> numeric require
//
// anything defined in a previous bundle is accessed via the
// orig method which is the require for previous bundles

(function(modules, entry, mainEntry, parcelRequireName, globalName) {...

Top Results From Across the Web

HTML - Parcel

While other assets referenced from an HTML file will include a content hash ... are also processed just like standalone files, and the...

Asset Bundles - UserFrosting Documentation

Asset bundles allow you to group one or more asset references for reuse throughout your application.

Bundling and Minification | Microsoft Learn

Bundling is a new feature in ASP.NET 4.5 that makes it easy to combine or bundle multiple files into a single file. You...

AssetBundles - Unity - Manual

An AssetBundle is an archive file that contains platform-specific non-code Assets (such as Models, Textures, Prefabs, Audio clips, and even entire Scenes) ...

How to Bundle a Simple Static Site Using Webpack - SitePoint

Run npm run build again to recreate the bundle. Everything should work as before. Now, if you have a look at index.html you'll...