"component.css is undefined" on fresh install

[Pierstoval]

Describe the bug

After a fresh install, running the server outputs this in the browser:

Logs

List of commands to reproduce

$ node --version
v14.4.0
$ npm --version
6.14.5
$ npx degit "sveltejs/sapper-template#rollup" sapper_test
npx : 1 installé(s) en 1.633s
> cloned sveltejs/sapper-template#rollup to sapper_test
$ cd sapper_test
$ npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\rollup\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.

added 272 packages from 182 contributors and audited 274 packages in 26.177s

19 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
$ npm run dev

> [email protected] dev e:\dev\www\sapper_test
> sapper dev

✔ server (1.2s)
✔ client (1.2s)
✔ service worker (26ms)
> Listening on http://localhost:3000

I tested this on Node 12, installed Node 14 to check if I was not outdated just in case, and it doesn't work anymore.

Stacktraces

Stack trace in the browser

load_component@http://localhost:3000/client/client.06dea69b.js:2088:20
hydrate_target/branch<@http://localhost:3000/client/client.06dea69b.js:2039:50
hydrate_target@http://localhost:3000/client/client.06dea69b.js:2023:42
navigate@http://localhost:3000/client/client.06dea69b.js:1889:3
start/<@http://localhost:3000/client/client.06dea69b.js:2148:22

Information about your Sapper Installation:

• Firefox 77.0.1 (64 bits)
• Windows 10
• Sapper version 0.27.13
• Svelte version 3.23.0
• With Rollup

Severity

High (project unusable)

Additionnal context

The home page is actually displayed in the first place, but the error replaces the entire page after a blink of an eye, so this definitely comes from the client.

As you can see on the following screenshot (click to unroll), adding a debugging breakpoint in the devtools shows that the project's web page is well rendered in the first place, but somehow there are issues with the component variable, for which the CSS is not rendered.
I'm not sure but maybe the frontend compiler isn't capable of rendering the CSS. I don't know if it's a Sapper or Svelte issue, though.

Breakpoint screenshot

[Pierstoval]

I investigated a bit, and it seems the error is only present on Windows, for some unknown reasons. I tested the exact same project on Linux and it just works...

The thing that bothers me is that it "used to work" and now it doesn't work anymore after an upgrade, but there are so many dependencies that I can't find which one could cause the issue.

[Pierstoval]

More research: when running all these commands inside a Docker container but in Windows, everything works. So it's definitely very specific to Windows.

[jlkiri]

Can't reproduce it on Windows 10 (neither on WSL2) + Firefox 77 + Node 12

[antony]

It would be useful if some other Windows users could confirm/deny this issue.

[Pierstoval]

Yep, I'm starting to wonder whether it's an isolated individual issue or not... 🤔

[pahosler]

Windows 10, WSL-2 running ubuntu, issue not repeatable on my workstation.

[Pierstoval]

Have you tried when not using WSL? I'm using native windows nodejs installation 😕 (this issue really tricks me, I had to use Docker as a workaround, but it's not perfect 😄 )

[pahosler]

Have you tried when not using WSL? I'm using native windows nodejs installation 😕 (this issue really tricks me, I had to use Docker as a workaround, but it's not perfect 😄 )

tested:
windows 10
powershell 6.2.4
node 14.4.0 (installed with winget)

issue not repeatable

[Pierstoval]

I guess it has something to do with my machine then 😭

[antony]

I think so. Come and see if there is more support available in chat?

[Pierstoval]

I'll join :)

[alanfelive]

I have such a problem!

[antony]

@alanfelive see my previous comment please

[Shackless]

Same here, where can I find the chat?

[benmccann]

Click the chat icon on the top right of the website which leads to https://svelte.dev/chat

[benmccann]

component.css comes from ./src/node_modules/@sapper/internal/manifest-client.mjs. If you have this problem can you look to see what's there and if it looks like the valid file below or something else:

export const components = [
	{
		js: () => import("../../../routes/index.svelte"),
		css: "__SAPPER_CSS_PLACEHOLDER:index.svelte__"
	},
	{
		js: () => import("../../../routes/about.svelte"),
		css: "__SAPPER_CSS_PLACEHOLDER:about.svelte__"
	},
	{
		js: () => import("../../../routes/item/[id].svelte"),
		css: "__SAPPER_CSS_PLACEHOLDER:item/[id].svelte__"
	},
	{
		js: () => import("../../../routes/user/[name].svelte"),
		css: "__SAPPER_CSS_PLACEHOLDER:user/[name].svelte__"
	},
	{
		js: () => import("../../../routes/[list]/[page].svelte"),
		css: "__SAPPER_CSS_PLACEHOLDER:[list]/[page].svelte__"
	}
];

Please also include whether you're using Rollup or Webpack

[Shackless]

Yes, that looks fine:

export const components = [
	{
		js: () => import("../../../routes/index.svelte"),
		css: "__SAPPER_CSS_PLACEHOLDER:index.svelte__"
	},
	{
		js: () => import("../../../routes/about.svelte"),
		css: "__SAPPER_CSS_PLACEHOLDER:about.svelte__"
	},
	{
		js: () => import("../../../routes/blog/index.svelte"),
		css: "__SAPPER_CSS_PLACEHOLDER:blog/index.svelte__"
	},
	{
		js: () => import("../../../routes/blog/[slug].svelte"),
		css: "__SAPPER_CSS_PLACEHOLDER:blog/[slug].svelte__"
	}
];

I'm using Rollup.

[benmccann]

Actually, it looks like that file isn't being used directly for components. Here's where it's actually coming from and what I get on Linux:

$ head -n 1630 __sapper__/dev/client/client.f78f61e2.js | tail -n 18
const components = [
	{
		js: () => import('./index.eba09477.js'),
		css: []
	},
	{
		js: () => import('./about.ba41c51f.js'),
		css: []
	},
	{
		js: () => import('./index.eb26171d.js'),
		css: []
	},
	{
		js: () => import('./[slug].16b575f1.js'),
		css: []
	}
];

[benmccann]

@Shackless is hitting this line: 😄

sapper/src/core/create_compilers/extract_css.ts

Line 199 in be8db30

// this should never happen!

[Shackless]

The double backslashes were printed because we logged to console using stringify(). It's actually not about the backslashes at all but the path in chunk.modules starts with a leading uppercase char and is compared to resolved which starts with a lowercase char in line

sapper/src/core/create_compilers/extract_css.ts

Line 196 in be8db30

const chunk: Chunk = client_result.chunks.find(chunk => chunk.modules.indexOf(resolved) !== -1);

[benmccann]

I sent a fix for this issue: #1338

Thanks to @Shackless for remote debugging this with me!