Regressions in 2.8.3

[keithlayne]

🐛 bug report

Upgrading parcel to 2.8.3 (from 2.8.2) caused some builds to break. It's not clear what exactly happened, but I think everything was related to sass.

I don't know if transformers are compatible with non-matching versions of parcel, but I didn't try downgrading only transformer-sass.

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

Not using babel.

I have a couple of local resolver plugins, only one of which I think is relevant - it aliases react to preact and is needed (AFAICT) to resolve those aliases in a monorepo where I also depend on react proper.

The only explicit parcel deps:

"@parcel/core": "2.8.3",
"@parcel/transformer-sass": "2.8.3",
"parcel": "2.8.3",

My setup builds a bunch of independent html sources using a shared parcel config.

😯 Current Behavior

• Sass file changes don't seem to trigger rebuilds in watch mode (when included from html via <link>)
• Some builds fail with Error: Expected content key XXXXXXXXX to exist. I suspected that font faces with src: url(../relative/path.ttf) were the culprit, but I couldn't confirm easily. Removing some of these didn't seem to help.

I apologize, I reverted the upgrade later and don't have an example of the original backtrace. They didn't give me any particular clues as to what the problem was.

💁 Possible Solution

Downgrading all things parcel to v2.8.2 caused everything to work as expected.

🌍 Your Environment

Software	Version(s)
Parcel	2.8.3
Node	16.15.1
Yarn	3.3.1
Operating System	Linux

[mellodev]

I'm having a similar issue with 2.8.3 builds failing w/ error Expected content key ### to exist. We don't use sass or the sass-transformer in our project though. Build/serve works fine in 2.8.2 as you stated.

#6528

[keithlayne]

@mellodev The issue you referenced sounds to me like an issue with the cache. I've seen that particular error with renaming TS to .tsx. It was always transient though - building with --no-cache (IIRC) fixed it.

I should have said that in this case, no shenanigans that I tried ended up with a successful build.

Maybe the sass thing is a red herring... 🤷‍♂️

[mellodev]

Perhaps. In my case, building with --no-cache and/or removing .parcel-cache first made no difference, I end up in the same place as you with an Expected content key ### to exist error.

[devongovett]

Nothing related to sass changed in that release: https://github.com/parcel-bundler/parcel/releases/tag/v2.8.3

Sounds like it could be related to changes in the bundler based on the stack trace in #6528. Any way you could share a reproduction?

[keithlayne]

I see a possible solution in #6528 - seems like all I gotta do is "fix crash" 🤣

Dunno if I'll have time to repro this soon. My setup is kinda funky, so maybe at least that will give some clues on how to reproduce this.

[dsibinski]

I'm also experiencing issues with Expected content key ### to exist (mentioned briefly in #8795 , can also be related to #8789 ) since 2.8.3.

I'm getting this error when I import an external .css file in my styles.scss file, if the styles.scss file is imported by more than one source.

[mischnic]

@dsibinski Can you share a complete reproduction?

[dsibinski]

@mischnic I somehow can't isolate this issue in a sample app.
The real-world example, which I cannot fully share, is that we have a Layout component which renders children. In the file with this component we also import some external CSS:

// Layout.tsx
import "react-confirm-alert/src/react-confirm-alert.css";
import "./styles.scss";

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

This Layout component is used by several other components which we treat as "entry points" of our application. Each of them is listed as a source in package.json:

"source": [
    "src/appsEntries/initApp.ts",
    "src/appsEntries/homeApp.ts",
    "src/appsEntries/app1.ts",
    "src/appsEntries/app2.ts",
    "src/appsEntries/app3.ts"
  ]

The content of each "app entry" file is similar. It exports a function from another .tsx file which uses createRoot to render a Layout component with different children components.

It means that all of those entries (or sources) in their dependencies tree have import of styles.scss file, as well as all the "manual" imports done in Layout.tsx file.

As you can see, in Layout.tsx we import both an external CSS (import "react-confirm-alert/src/react-confirm-alert.css") and styles.scss.

Today I found out that the build error @parcel/bundler-default: Expected content key a66f20ccc138a5ee to exist occurs when I also include the same external CSS file import in styles.scss in the following way:

@import "../../../node_modules/react-confirm-alert/src/react-confirm-alert.css";

so this same .css file (react-confirm-alert.css) is imported both in Layout.tsx and styles.scss.

This is how the error message exactly looks like:

🚨 Build failed.

@parcel/bundler-default: Expected content key a66f20ccc138a5ee to exist

  Error: Expected content key a66f20ccc138a5ee to exist
      at nullthrows (C:\Repos\my-web-app\node_modules\nullthrows\nullthrows.js:7:15)
      at ContentGraph.getNodeIdByContentKey (C:\Repos\my-web-app\node_modules\@parcel\graph\lib\ContentGraph.js:81:38)
      at getReachableBundleRoots (C:\Repos\my-web-app\node_modules\@parcel\bundler-default\lib\DefaultBundler.js:1161:44)
      at createIdealGraph (C:\Repos\my-web-app\node_modules\@parcel\bundler-default\lib\DefaultBundler.js:728:21)
      at Object.bundle (C:\Repos\my-web-app\node_modules\@parcel\bundler-default\lib\DefaultBundler.js:122:19)
      at BundlerRunner.bundle (C:\Repos\my-web-app\node_modules\@parcel\core\lib\requests\BundleGraphRequest.js:288:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.run (C:\Repos\my-web-app\node_modules\@parcel\core\lib\requests\BundleGraphRequest.js:156:17)
      at async RequestTracker.runRequest (C:\Repos\my-web-app\node_modules\@parcel\core\lib\RequestTracker.js:756:20)
      at async Object.run (C:\Repos\my-web-app\node_modules\@parcel\core\lib\requests\ParcelBuildRequest.js:56:7)

[Cristy94]

For me, upgrading from 2.3.2 -> 2.8.3 and launching it threw an error saying @parcel/transformer-sass failed to install because:
Failed to install @parcel/transformer-sass: npm failed to install modules: Unexpected token > in JSON with the main cause: Unsupported platform for fsevents@2.3. (I'm on Windows 11)

It was an optional dependency though, so after clearing cache and starting again, parcel it worked.

[tcmulder]

I'm experiencing the "Error: Expected content key XXXXXXXXX to exist" issue as well after upgrading from v2.7.0 to v2.8.3. If I switch back to v2.7.0, the error goes away; but... if I delete my package-lock.json and node_modules (and .parcel-cache) and npm install, then I get the same error using v2.7.0. So it's possible the issue was introduced earlier, but package-lock.json has been masking it.

@mellodev, you said v2.8.2 was working for you: if you remove package-lock.json and node_modules, then reinstall, does it begin to error at that version?

[mellodev]

No that doesn't match my experience:

If I remove node_modules, .parcel-cache, pnpm-lock.yaml, update the dependencies to 2.8.3 then build/start dev server I will see:

Afterward, if I remove node_modules, .parcel-cache, pnpm-lock.yaml, update the dependencies to 2.8.2 then build I get a successful build.

We are using pnpm instead of npm in your case, but I don't think that will matter. Are you removing the .parcel-cache folder as part of your testing @tcmulder?

[tcmulder]

Yes, I'm essentially running rm -rf .parcel-cache && npm run build every time rather than simply running the build just to be certain it's not a cache issue. I've tried using npm and yarn to see if there's a difference. I also tried restarting my entire computer just in case something's getting stuck in memory, but still no dice.

Guess I'm okay to keep running on v2.7.0 for now, it's not missing any features I need for current projects.

[lukaw3d]

@dsibinski: @mischnic I somehow can't isolate this issue in a sample app. The real-world example, which I cannot fully share, is that we have a Layout component which renders children. In the file with this component we also import some external CSS

I think I am encountering the exact same issue and made a very minimal sample:
https://github.com/lukaw3d/parcel-bundler_two-css-from-js_and-css-from-second-css

The gist seems to be: if you import multiple CSS files from JS, only the first CSS file can import other CSS files

flowchart LR
  parcel(parcel build --no-cache index.html) --> index.html --> index.js
  index.js --> a.css
  index.js --> b.css --> |issue| bb.css

Loading

[mischnic]

Could you test the nightly version (yarn add parcel@nightly, and same for any other parcel packages you might have)? https://github.com/lukaw3d/parcel-bundler_two-css-from-js_and-css-from-second-css is working for me with the latest nightly

[lukaw3d]

@mischnic +1 nightly works on my sample and bigger project

[tcmulder]

@mischnic nightly also works for me.

[lukaw3d]

For reference:
2.0.0-nightly.1271 is where it starts working for me - that means one of these fixes 9e6d008...f65889e.
Most likely fixed by #8885