ViteJS build produces error when using ThemeContext

[sdosch]

There seems to be an incompatibility with ViteJS and when using Grommet ThemeContext.

Expected Behavior

Using ThemeContext inside a ViteJS environment should work as it does currently with Create React App.

Actual Behavior

Using ThemeContext will produce a compile error after building the project via vite build.

Steps to Reproduce

• scaffold a new Vite react project like described here: https://vitejs.dev/guide/

• replace the following code in App.tsx:

import { Box, Grommet, ThemeContext } from "grommet";

export default function App(): JSX.Element {
  return (
    <Grommet>
      <ThemeContext.Extend
        value={{
          global: {
            colors: { doc: "#ff99cc" },
          },
        }}
      >
        <Box pad="large" background="doc" />
      </ThemeContext.Extend>
    </Grommet>
  );
}

• build the project for production (vite build)
• locally preview production build (vite preview)
• produces Minified React error:

index-1uIJSkDh.js:4271 Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at yh (index-1uIJSkDh.js:7185:17)
    at J2 (index-1uIJSkDh.js:3679:113)
    at Yi (index-1uIJSkDh.js:4342:27)
    at Zi (index-1uIJSkDh.js:4354:3)
    at Wk (index-1uIJSkDh.js:6986:92)
    at Vk (index-1uIJSkDh.js:6569:12)
    at Uk (index-1uIJSkDh.js:6562:5)
    at Jk (index-1uIJSkDh.js:6545:7)
    at Ok (index-1uIJSkDh.js:6261:7)
    at Hk (index-1uIJSkDh.js:6192:54)
Mi @ index-1uIJSkDh.js:4271
Oi.c.callback @ index-1uIJSkDh.js:4286
ih @ index-1uIJSkDh.js:3335
lk @ index-1uIJSkDh.js:5960
jk @ index-1uIJSkDh.js:5920
ik @ index-1uIJSkDh.js:5897
Xk @ index-1uIJSkDh.js:6655
Qk @ index-1uIJSkDh.js:6611
Hk @ index-1uIJSkDh.js:6208
J2 @ index-1uIJSkDh.js:491
R2 @ index-1uIJSkDh.js:521
index-1uIJSkDh.js:7185 Uncaught Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at yh (index-1uIJSkDh.js:7185:17)
    at J2 (index-1uIJSkDh.js:3679:113)
    at Yi (index-1uIJSkDh.js:4342:27)
    at Zi (index-1uIJSkDh.js:4354:3)
    at Wk (index-1uIJSkDh.js:6986:92)
    at Vk (index-1uIJSkDh.js:6569:12)
    at Uk (index-1uIJSkDh.js:6562:5)
    at Jk (index-1uIJSkDh.js:6545:7)
    at Ok (index-1uIJSkDh.js:6261:7)
    at Hk (index-1uIJSkDh.js:6192:54)

Temporary Workaround

instead of import { ThemeContext } from "grommet"; (line 1)
use import { ThemeContext } from "grommet/contexts/ThemeContext";

Your Environment

• Grommet version: 2.35.0
• Browser Name and version: Chrome Version 121.0.6167.139
• Operating System and version (desktop or mobile): MacOS