Error: Bundles must have unique names when SCSS imported in two source files

[dsibinski]

🐛 bug report

If an .scss file is imported somewhere within two source files, the build fails with an error.

Given a common Layout component:

import "./styles.scss";

export const Layout = ({ children }: { children: React.ReactNode }) => {
  return <>{children}</>;
};

which is a "wrapper" for other components, that case two of them:

// App1.tsx
import { Layout } from "./Layout";

export const App1 = () => {
  return (
    <Layout>
      <div>This is app1</div>
    </Layout>
  );
};

// App2.tsx
import { Layout } from "./Layout";

export const App2 = () => {
  return (
    <Layout>
      <div>This is app2</div>
    </Layout>
  );
};

In package.json both files are listed as sources:

"source": [
    "App1.tsx",
    "App2.tsx"
  ],

When running npx parcel build, it fails with Error: Bundles must have unique names.

🤔 Expected Behavior

No build error.

😯 Current Behavior

npx parcel build
🚨 Build failed.

Error: Bundles must have unique names

  AssertionError [ERR_ASSERTION]: Bundles must have unique names
      at BundlerRunner.nameBundles (C:\Repos\parcel-test-app\node_modules\@parcel\core\lib\requests\BundleGraphRequest.js:390:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async BundlerRunner.bundle (C:\Repos\parcel-test-app\node_modules\@parcel\core\lib\requests\BundleGraphRequest.js:341:7)
      at async Object.run (C:\Repos\parcel-test-app\node_modules\@parcel\core\lib\requests\BundleGraphRequest.js:156:17)
      at async RequestTracker.runRequest (C:\Repos\parcel-test-app\node_modules\@parcel\core\lib\RequestTracker.js:756:20)
      at async Object.run (C:\Repos\parcel-test-app\node_modules\@parcel\core\lib\requests\ParcelBuildRequest.js:56:7)
      at async RequestTracker.runRequest (C:\Repos\parcel-test-app\node_modules\@parcel\core\lib\RequestTracker.js:756:20)
      at async Parcel._build (C:\Repos\parcel-test-app\node_modules\@parcel\core\lib\Parcel.js:400:11)
      at async Parcel.run (C:\Repos\parcel-test-app\node_modules\@parcel\core\lib\Parcel.js:276:18)
      at async run (C:\Repos\parcel-test-app\node_modules\parcel\lib\cli.js:376:7)

💁 Possible Solution

Either fix a bug or propose some configuration/alternate solution for generating unique bundle files' names in that case.

🔦 Context

The context is wider than provided in the example. I'm serving the application with .NET Core. That's why I use different files insource, without a central index.js/index.html file.

We are having tough time fighting with this issue in our project with parcel 🙄 I even tried listing the .scss file as a separate source in package.json and then only linking the bundled .css in our HTML files, but then HMR doesn't work properly (often throws errors).

💻 Code Sample

Please find attached a sample minimalist React app:

parcel-test-app.zip

To reproduce:

1. npm install
2. npx parcel build

🌍 Your Environment

Software	Version(s)
Parcel	2.8.3
Node	v18.2.1
npm/Yarn	npm 8.19.2
Operating System	Windows 11