When using "globalStyles", I had err "Cannot read properties of undefined (reading 'cache')" in build.

[terao-ryohei]

Bug report

If I build react project, I got err.

code:

import { globalStyles } from './styles/globalStyles';

export function App() {
  globalStyles();
  return (
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  );
}

import { globalCss } from './stitches.config';

// Initialize Global Styles
export const globalStyles = globalCss({
  body: {
    backgroundColor: '#80B2D2',
    fontWeight: '500',
    color: '#666',
    fontFamily: 'M PLUS Rounded 1c',
  },
});

err:

TypeError: Cannot read properties of undefined (reading 'cache')
    at r (index.96b2b110.js:210:16102)
    at xje (index.96b2b110.js:291:64430)
    at jC (index.96b2b110.js:186:19132)
    at mF (index.96b2b110.js:188:44699)
    at hF (index.96b2b110.js:188:40312)
    at Rfe (index.96b2b110.js:188:40238)
    at Im (index.96b2b110.js:188:40089)
    at Cx (index.96b2b110.js:188:36423)
    at cF (index.96b2b110.js:188:35367)
    at E (index.96b2b110.js:173:1628)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Use "globalStyles" in code.
2. Build and serve

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [macOS]

• Browser (if applies) [chrome]

• Version of Stitches: [1.2.8]

• Version of Node.js: [16.14.2]

• react [18.1.0]

• vite [2.9.8]

• typescript [4.6.4]

[jchenfp]

Is there any update on this issue? Same problem here. This error pops when you use "globalCSS" or "keyframes" in Vite. "@stitches/react": "1.2.8", "vite": "^3.0.9",

[adnanlah]

Is there any update on this issue? Same problem here. This error pops when you use "globalCSS" or "keyframes" in Vite. "@stitches/react": "1.2.8", "vite": "^3.0.9",

Hello, may I ask how can I implement global styles in my Vite React app? This is my main.tsx https://hastebin.com/xuyujatawi.js

[jchenfp]

Is there any update on this issue? Same problem here. This error pops when you use "globalCSS" or "keyframes" in Vite. "@stitches/react": "1.2.8", "vite": "^3.0.9",

Hello, may I ask how can I implement global styles in my Vite React app? This is my main.tsx https://hastebin.com/xuyujatawi.js

You can find it here: https://stitches.dev/docs/styling

[EmmanuelLeBris]

Hello, I just had the problem. I hope that message will help someone. From my side, the problem comes from my Vite configuration (vite.config.js) which redefines "global"

define: {
  // ...
  global: {},
},

This configuration overwrites the names of the rules in Stitches:

(Stitches: sheet.js)

/**
 * Rules in the sheet appear in this order:
 * 1. theme rules (themed)
 * 2. global rules (global)
 * 3. component rules (styled)
 * 4. non-responsive variants rules (onevar)
 * 5. responsive variants rules (resonevar)
 * 6. compound variants rules (allvar)
 * 7. inline rules (inline)
 */
/** @type {RuleGroupNames} */
export const names = ['themed', 'global', 'styled', 'onevar', 'resonevar', 'allvar', 'inline']

Which is broken after the build:

["themed", "{}", "styled", "onevar", "resonevar", "allvar", "inline"]

Finally, the "rules" object inside Stitches looks like that :

rules : {
   "themed" : {...}
   "{}": {...}
    // etc.
}

That's why you have a null pointer when globalCss access rules.global.cache.