"module is not defined" in cssesc

[jcayzac]

Describe the bug

ReferenceError: module is not defined
    at eval (cssesc.js:110:1)
    at instantiateModule (dep-BcXSligG.js:53408:11)

cssesc.js is CommonJS and can't be imported as a module.

Reproduction

https://stackblitz.com/edit/stackblitz-starters-1kbjbz

System Info

System:
    OS: macOS 14.5
    CPU: (11) arm64 Apple M3 Pro
    Memory: 148.14 MB / 36.00 GB
    Shell: 5.2.26 - /opt/homebrew/bin/bash
  Binaries:
    Node: 20.15.1 - ~/Library/pnpm/node
    npm: 10.7.0 - ~/Library/pnpm/npm
    pnpm: 9.3.0 - ~/.prefix/bin/pnpm
    bun: 1.1.17 - /opt/homebrew/bin/bun
  Browsers:
    Brave Browser: 126.1.67.123
    Chrome: 126.0.6478.185
    Safari: 17.5
    Safari Technology Preview: 18.0
  npmPackages:
    @vanilla-extract/css: ^1.15.3 => 1.15.3
    @vanilla-extract/vite-plugin: ^4.0.13 => 4.0.13

Used Package Manager

npm

Logs

ReferenceError: module is not defined
    at eval (cssesc.js:110:1)
    at instantiateModule (dep-BcXSligG.js:53408:11)

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[jcayzac]

Original issue here: withastro/astro#11395

[zhaohuanyuu]

I got this problem too, only appears when loading for the first time, and will be restored when reloading from #11395

[LekoArts]

I'm also running into this error. I'm currently experimenting with the https://vitejs.dev/config/dep-optimization-options#optimizedeps-include setting, monkey-patching vanilla-extract and/or trying to adjust the Astro config. No luck so far :/

[jcayzac]

Meanwhile, I just copied cssesc.js into overrides/cssesc/index.ts, patched it, and added this to my package.json:

"overrides": {
	"cssesc": "./overrides/cssesc"
}

This fixes it for me. I don't expect I'll need to maintain this fork, seeing the original package is dead (5+ years with no update).

[LekoArts]

Thanks for that info! I also did that now, as a workaround it'll be fine for me. If anyone from Google finds this, here's what you'll need to do:

1. Copy https://github.com/mathiasbynens/cssesc/blob/cb894eb42f27c8d3cd793f16afe35b3ab38000a1/cssesc.js into a location in your project and call it index.cjs. Also add a package.json that can be as minimal as e.g. like this:
   

   
   

   package.json

    {
    	"name": "cssesc",
    	"version": "3.0.0",
    	"description": "A JavaScript library for escaping CSS strings and identifiers while generating the shortest possible ASCII-only output.",
    	"author": {
    		"name": "Mathias Bynens",
    		"url": "https://mathiasbynens.be/"
    	},
    	"license": "MIT",
    	"exports": {
    		".": {
    			"import": "./index.mjs",
    			"require": "./index.cjs"
    		}
    	}
    }
   

2. Copy the file and rename it to index.mjs. At the bottom of the index.mjs file, change the export to: export default cssesc

3. If you use pnpm, add:

   "pnpm": {
   	"overrides": {
   		"cssesc": "./overrides/cssesc"
   	}
   }

4. It should "work" now

[LekoArts]

@jcayzac How did you patch the file exactly? Actually, the patch I described above doesn't work during astro build and I have to remove it. It works fine for astro dev though.

[jcayzac]

@LekoArts I just replaced the commonjs export with an esm export.

[LekoArts]

Gotcha 👍 I've updated my previous message with the instructions now that work for me both in dev and build. I just changed it to provide a dual CJS/ESM package where the index.cjs has the CJS export, index.mjs the ESM one.