ThemeContext.Extend causing issue in production build with rollup and treeshake enabled

[jbpenrath]

Expected Behavior

I want to be able to use ThemeContext module into my React application based on Grommet then build it with vite/rollup for production with treeshaking enabled.

Actual Behavior

Currently, if I used <ThemeContext.Extend /> into my application then I build it for production with vite/rollup, I get the following error :

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.

Identified workarounds

• Disable treeshaking from rollupOptions fix the problem but we do not have bundle size optimization that is really weird.
• It appears that removing sideEffects property into grommet package.json file fix the issue 🤔

URL, screen shot, or Codepen exhibiting the issue

• A repository has been bootstrapped to reproduce the error

• A related closed issue ThemeContext.Extend causing issues from CRA production build, possibly missing 💥  #2669

Steps to Reproduce

1. Bootstrap an application with vite (npx create-vite)
2. Install grommet (npm install grommet styled-components)
3. Import ThemeContext module in your main module
4. Wrap your <App /> within <ThemeContext.Extend>
5. Build your application npm run build
6. Run the preview of your application npm run preview
7. Go to http://localhost:4173 then see your broken application 😢

Your Environment

• Vite version: 4.0.0
• Rollup version: 3.11.0
• Grommet version: 2.29.1
• Browser Name and version: Brave 1.47.171
• Operating System and version (desktop or mobile): Mac OS 13.1

[floreks]

Just hit this issue today in our project. Somehow importing ThemeContext from grommet/contexts instead of grommet worked for me. Might be a good way to temporarily fix that before it gets fixed upstream.

[ShimiSun]

Hey! Our team is also running into a similar issue. We currently can't use Grommet's ThemeContext due to rollup. Please share your findings.

[ericsoderberghp]

Hey! Our team is also running into a similar issue. We currently can't use Grommet's ThemeContext due to rollup. Please share your findings.

Is the suggested workaround: import { ThemeContext } from 'grommet/contexts' not working anymore?

[kariwhitcomb]

I just ran into this issue when building our app using vitejs. The workaround does still work. import { ThemeContext } from 'grommet/context'.

I played around and it also seems that if grommet's package.json was updated to include "./contexts/ThemeContext/ThemeContext.js" in the sideEffects, then importing just from grommet would work correctly.

[danielm-hpe]

We also just encountered this issue after migrating our app from CRA to vitejs v4. We were not having any issues using CRA. The issue was only seen in prod builds.

The workaround does still work. import { ThemeContext } from 'grommet/context'

This workaround also worked for us

I think that #7122 is likely also related to this issue, even if they're not exact duplicates.

I see there was some past history here with #2669