"Could not resolve bundle with id" [BUG]

[ar7casper]

What happened?

A bug happened!

I've built an extension, and I'm getting this error when running the extension -
"Could not resolve bundle with id"

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

@ar7casper can you provide a reproduction repo

[Sina-Abf]

can you comeup with fix? this is my issue too

[Sina-Abf]

import type {
  PlasmoCSConfig,
  PlasmoCSUIJSXContainer,
  PlasmoCSUIProps,
  PlasmoRender,
} from 'plasmo';
import type { FC } from 'react';
import { createRoot } from 'react-dom/client';

import './style.css';
import { App } from '~components';

// Specific Url Where Extension Injects
export const config: PlasmoCSConfig = {
  matches: ['https://www.youtube.com/watch*'],
};
// Youtube Sidebar Root
export const getRootContainer = () =>
  new Promise((resolve) => {
    const checkInterval = setInterval(() => {
      const rootContainerParent = document.querySelector('#secondary'); // Sidebar Id
      if (rootContainerParent) {
        clearInterval(checkInterval);
        const rootContainer = document.createElement('div');
        rootContainerParent.insertBefore(
          rootContainer,
          rootContainerParent.firstChild
        );
        resolve(rootContainer);
      }
    }, 137);
  });

// Starting Point
const PlasmoOverlay: FC<PlasmoCSUIProps> = () => {
  return <App />;
};

// React Render
export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
  createRootContainer,
}) => {
  const rootContainer = await createRootContainer();
  const root = createRoot(rootContainer);
  root.render(<PlasmoOverlay />);
};

export default PlasmoOverlay;

this is my starting point on content.tsx, it works really well on dev mode, but on build and package it says:
Uncaught Error: Could not resolve bundle with id 2PqVL

[wybran]

same issue on safari ☹️

[martonlederer]

Seeing this as well, only after building the extension, not in dev mode. I'm pretty sure it is coming from parcel (@parcel/runtime-js/src/helpers/bundle-manifest.js).

(ArConnect#108)

Update: maybe this is related to Parcel Bundler#7609

[martonlederer]

Temporary solution to this, if you're using yarn:
Because the error originates from @parcel/runtime-js which Plasmo depends on, you can overwrite it with no issues in your package.json, using "resultions".

[DanielRuf]

Same issue here. We use the src folder setup with ~some-sub-folder/module in imports.

https://docs.plasmo.com/framework/customization/src
https://docs.plasmo.com/framework/import#tilde-

[DanielRuf]

Temporary solution to this, if you're using yarn:
Because the error originates from @parcel/runtime-js which Plasmo depends on, you can overwrite it with no issues in your package.json, using "resultions".

Thanks, that worked.

[ernivani]

thank that work for me too

[DanielRuf]

Hm, seems to be fixed with the latest plasmo version, which uses @parcel/runtime-js 2.9.3.

[thinkclay]

Having this issue all of a sudden too.
Development environment works but production build fails.
On latest version of plasmo and confirmed @parcel/runtime-js at 2.9.3.

[wuyue92tree]

for pnpm

// package.json
{
  ...
  "pnpm": {
    "overrides": {
      "@parcel/runtime-js": "2.8.3"
    }
  },
  ...
 }

@DanielRuf thanks a lot.

[ashwanth1109]

Having this issue all of a sudden too. Development environment works but production build fails. On latest version of plasmo and confirmed @parcel/runtime-js at 2.9.3.

Im facing this currently as well (works in dev, get the error on prod build).
I'm on plasmo v0.83.0 which installs @parcel/runtime-js v2.9.3. I've tried overriding the version to v2.8.3 as per @wuyue92tree comment, but still the same error.

[DanielRuf]

@ashwanth1109 the comment covers the pnpm package manager.

Do you use pnpm, yarn or npm (and which version)?

For yarn please see #661 (comment)

[ashwanth1109]

@ashwanth1109 the comment covers the pnpm package manager.

Do you use pnpm, yarn or npm (and which version)?

For yarn please see #661 (comment)

@DanielRuf , I'm using pnpm v8.6.12 and I tried pnpm overrides in package.json mentioned in an earlier comment

[DanielRuf]

@ashwanth1109 hm, interesting. Maybe there is some bug in your version or you have to delete node_modules and try again.

Best is to ask in the pnpm community for help.

[smissingham]

for pnpm

// package.json
{
  ...
  "pnpm": {
    "overrides": {
      "@parcel/runtime-js": "2.8.3"
    }
  },
  ...
 }

@DanielRuf thanks a lot.

Started getting it today myself. Took a while to find this thread, and thankfully this fixed it.

Commenting here so I can watch for resolution to remove this hack from my project.

Very frustratingly, I couldn't reproduce it when running in dev mode with plasmo dev, had to plasmo build and install the built artifact to reproduce the error. Because of that, we actually published a broken app to ~700 users cos "it worked on my machine" 😟

[gogoend]

for pnpm

// package.json
{
  ...
  "pnpm": {
    "overrides": {
      "@parcel/runtime-js": "2.8.3"
    }
  },
  ...
 }

@DanielRuf thanks a lot.

This resolved my issue. 👍

What I encounter is, when I import some image eg. import iconSrc from '~assets/icon.png', the code runs fine in development, but it reports this error in production.

[ashwanth1109]

@ashwanth1109 hm, interesting. Maybe there is some bug in your version or you have to delete node_modules and try again.

Best is to ask in the pnpm community for help.

@DanielRuf , thanks for you response! 👍🏾
I recloned my repo, installed node_modules again, ran build with each incremental change. I can confirm as well that my issue also has to do with importing an image. I used pnpm overrides "2.8.3" and this allows importing images in production build as mentioned in previous comments.

[louisgv]

This is tricky..... thanks all for the report.

So the latest 2.9.3 runtime-js is now following strict ESM resolve with the requirement of package.json needs to have proper export declaration. This, in turn, broke tons of import path that was working prior with CJS.

Now, the boggling thing is that... most npm package import paths are still relying on the old CJS resolution algo, so the latest parcel resolver will break a lot of projects.

The main PROS of the latest js-transformer is that it's rewritten in RUST and is supposed to be much faster...

I think the decision here would be to just revert course back to the 2.8.3 packager until they ironed out their techdebt?... OR should we try to migrate everything to module/ESM? The latter will force deprecation many npm cjs packages that'd otherwise be usable in a framework like NextJS.

I think Plasmo framework should be more backward compatible. However it's just me maintaining the core project so it's tough to polyfill/rewrite/maintain backward compatibility code... (Which are core business unit for MSFT and NextJS itself as well, I think).

If the community is down to help out investigating a way to have backward compatibility between CJS and ESM import resolution, that'd be great. But otherwise, I think we should revert to 2.8.3 and freeze it there for now?

[DanielRuf]

I would vote for "revert to 2.8.3 and freeze / pin".

[spookyuser]

I had this on v0.83 of plasmo but v0.84 seems to fix it

[Squix]

I'm getting the same error on plasmo v0.84.
I tried overriding @parcel/runtime-js to use 2.8.3, then deleting node_modules and build folder.
It just doesn't work.
When I open the popup (importing a css file with import "~global_styles/global.css"), I get this error :

Uncaught Error: Could not resolve bundle with id bPa86

When using import "data-text:~global_styles/global.css" instead, I've got no error, but the tailwind styles (that are imported in global.css) are not loaded.

EDIT :
Things are getting stranger : when loading tailwind style with import "~popup_style.css" it works.
But when loading from a file named "global.css" with import "~global.css" it fails...

[EmilMalanczak]

Encountering the same error persistently:

Issue:
After building the package and attempting to open a popup window, an error occurs, seemingly related to styling.

Details:
In the popup.tsx file, there's a correct import statement for fonts.css located at ~features/shared/styles/fonts.css. For testing purposes, I commented out all CSS code and applied background-color: red; to the body element.

Observations:
Despite successful attachment of styles (background turns red), the application crashes with the error: Could not resolve bundle with id hhU9i.

Environment:

• Browser: chrome (latest version)
• Framework: plasmo v0.84 (with src directory)
• Package Manager: pnpm v8.7.3

Additionally, the pnpm override for @parcel/runtime-js is not functioning as expected.

Worth to mention that the import "~features/popup/styles/popup-styles.css" doesn't cause the problem, order doesn't change anything either