@vanilla-extract/sprinkles - Cannot use import statement outside a module (React Router 7 and Vite 6)

[MattyBalaam]

Describe the bug

I have only been able to reduce this one down to an incompatibility between these packages.

In some cases I have been able to use ssr.noExternal: ['@vanilla-extract/sprinkles'] to workaround this.

Reproduction

https://github.com/MattyBalaam/vanilla-extract-vite-6-react-router-7

I have added some info to ReadMe

System Info

System:
    OS: macOS 15.3
    CPU: (11) arm64 Apple M3 Pro
    Memory: 75.81 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - /opt/homebrew/opt/node@20/bin/node
    Yarn: 1.22.19 - /opt/homebrew/opt/node@18/bin/yarn
    npm: 10.7.0 - /opt/homebrew/opt/node@20/bin/npm
    pnpm: 8.15.1 - /opt/homebrew/opt/node@18/bin/pnpm
  Browsers:
    Chrome: 133.0.6943.54
    Safari: 18.3
  npmPackages:
    @vanilla-extract/css: 1.17.1 => 1.17.1
    @vanilla-extract/sprinkles: 1.6.3 => 1.6.3
    @vanilla-extract/vite-plugin: 5.0.0 => 5.0.0
    vite: 6.1.0 => 6.1.0

Used Package Manager

npm

Logs

at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at SSRCompatModuleRunner.directRequest (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/module-runner.js:1220:24)
    at SSRCompatModuleRunner.cachedRequest (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/module-runner.js:1167:76)
    at eval (eval at runInlinedModule (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/module-runner.js:1049:11), <anonymous>:4:31)
    at ESModulesEvaluator.runInlinedModule (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/module-runner.js:1049:5)
    at SSRCompatModuleRunner.directRequest (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/module-runner.js:1271:61)
    at SSRCompatModuleRunner.directRequest (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:30895:23)
    at SSRCompatModuleRunner.cachedRequest (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/module-runner.js:1167:76)
    at eval (/xxxxxxx/vite-6-rr7-test/app/routes/home.tsx:5:31)
    at ESModulesEvaluator.runInlinedModule (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/module-runner.js:1049:5)
    at SSRCompatModuleRunner.directRequest (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/module-runner.js:1271:61)
    at SSRCompatModuleRunner.directRequest (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:30895:23)
    at SSRCompatModuleRunner.cachedRequest (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/module-runner.js:1167:76)
    at eval (virtual:react-router/server-build:6:31)
    at ESModulesEvaluator.runInlinedModule (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/module-runner.js:1049:5)
    at SSRCompatModuleRunner.directRequest (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/module-runner.js:1271:61)
    at SSRCompatModuleRunner.directRequest (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:30895:23)
    at SSRCompatModuleRunner.cachedRequest (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/module-runner.js:1167:76)
    at SSRCompatModuleRunner.import (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/module-runner.js:1104:12)
    at instantiateModule (file:///xxxxxxx/vite-6-rr7-test/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:30852:12)
    at /xxxxxxx/vite-6-rr7-test/node_modules/@react-router/dev/dist/vite.js:2000:29

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.

[MattyBalaam]

Looking in Zed, It appears that it is attempting to import the cjs file.

[MattyBalaam]

I have added example to stackblitz now:

https://stackblitz.com/~/github.com/MattyBalaam/vanilla-extract-vite-6-react-router-7

[MattyBalaam]

I raised this with React Router in case this is an issue with them and they believe it is a vanilla extract issue. I can raise a PR if anyone knows how this case be fixed?

remix-run/react-router#13177 (comment)

[zbull-z]

We had a similar issue and used optimizeDeps.exclude: ['@vanilla-extract/sprinkles'] along with ssr.noExternal: ['@vanilla-extract/sprinkles'].