Dev server error: ReferenceError: module is not defined (node_modules/cssesc/cssesc.js:73:1)

[lilnasy]

Astro Info

Astro                    v4.16.3
Node                     v18.20.3
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When vite.ssr.noExternal = true is set, no page can be accessed from the dev server. Production build is not impacted.

What's the expected result?

vite.ssr has no effect on the dev server. Alternatively, cssesc-related issues only arise when its code is needed (i.e., in projects using view transitions), or cssesc can be detected as a commonjs module and be transpiled appropriately.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-jdp8df?file=astro.config.mjs

Participation

• I am willing to submit a pull request for this issue.

[martrapp]

Hi Arsh! Good do hear from you again!

Let me take a look 👀

[martrapp]

Surely you know the remedy, but for others who may stumble across it in the meantime, it's a quick fix:
In the astro.config re-add cssesc after noExternal: true

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  vite: {
-   ssr: { noExternal: true },
+   ssr: { noExternal: true, external: ['cssesc'] },
  },
});

[bluwy]

We can add cssesc here

astro/packages/astro/src/core/create-vite.ts

Lines 66 to 74 in 6df5bba

	// These specifiers are usually dependencies written in CJS, but loaded through Vite's transform
	// pipeline, which Vite doesn't support in development time. This hardcoded list temporarily
	// fixes things until Vite can properly handle them, or when they support ESM.
	const ONLY_DEV_EXTERNAL = [
	// Imported by `@astrojs/prism` which exposes `<Prism/>` that is processed by Vite
	'prismjs/components/index.js',
	// Imported by `astro/assets` -> `packages/astro/src/core/logger/core.ts`
	'string-width',
	];

Though using ssr.noExternal: true in dev is kinda a rare case too since you're saying all your dependencies recursively export ESM, which isn't the case most of the time.