"module is not defined" in cssesc

jcayzac commented 4 months ago

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

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

jcayzac commented 4 months ago

Original issue here: https://github.com/withastro/astro/issues/11395

zhaohuanyuu commented 4 months ago

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

LekoArts commented 4 months ago

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 commented 3 months ago

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 commented 3 months ago

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:

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" } } }
Copy the file and rename it to index.mjs. At the bottom of the index.mjs file, change the export to: export default cssesc

If you use pnpm, add:

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

It should "work" now

LekoArts commented 3 months ago

@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 commented 3 months ago

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

LekoArts commented 3 months ago

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.

vanilla-extract-css / vanilla-extract