ThemeContext.Extend causing issues from CRA production build, possibly missing 💥
See original GitHub issueHint: I did spend a little time trying to figure it out and it seems like ThemeContext / ThemeContext.Extend is not available in the build?
I did a temporary workaround where I just brought in a copy of ThemeContext.js and deps into project source and loaded it from there instead of in grommet package and it seems to work after that.
Expected Behavior
Should work in production build, not cause fatal crash the moment ThemeContext.Extend gets imported / used.
Actual Behavior
Works fine in webpack dev server, explodes in CRA build using npm run build
💥
URL, screen shot, or Codepen exhibiting the issue
Steps to Reproduce
- Install stuff
npm init -y
npm i -S react-scripts
npx create-react-app my-react-app
cd my-react-app
npm i -S grommet styled-components
- Edit index.js to something like attachment
- Verify it works fine in webpack dev server
npm start
- Try to load the production build
npm run build
cd build
python -m SimpleHTTPServer
View http://localhost:8000/ and verify that the page does not render and console is full of red
Your Environment
- Grommet version: 2.3.1
- Browser: FF Quantum Latest Stable
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:16 (5 by maintainers)
Top Results From Across the Web
Why won't React production build run on the browser?
To fix this problem go to your build folder then you will see manifest.json file, ...
Read more >How to fix build failures with `create-react-app` in production
If your build is using create-react-app and has been failing since approximately the 18th of June 2020, this post will help you fix...
Read more >Porting from Create React App to Gatsby
React's context API allows you to share state from a higher component and distribute it to components below it in the component tree...
Read more >Troubleshooting - Create React App
npm run build fails to minify. Before react-scripts@2.0.0 , this problem was caused by third party node_modules using modern JavaScript ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I digged in a bit more, i think this is a tree shaking issue than a side effect one. Not sure yet. A better work around from the one to c/p files around is to use
import {ThemeContext} from "grommet/contexts"
to import the ThemeContext instead of importing from grommet.Digging more to find why this is happening.
Excellent! Once again thanks to everyone who contributed to the resolution of this bug!