question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ThemeContext.Extend causing issues from CRA production build, possibly missing 💥

See original GitHub issue

Hint: 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

image

Steps to Reproduce

  1. 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
  1. Edit index.js to something like attachment

index.js.txt

  1. Verify it works fine in webpack dev server

npm start

  1. 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:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:16 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
oorestisimecommented, Mar 7, 2019

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.

1reaction
oorestisimecommented, Mar 22, 2019

Excellent! Once again thanks to everyone who contributed to the resolution of this bug!

Read more comments on GitHub >

github_iconTop 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 >
FAQs - styled-components
Commonly asked questions about styled-components.
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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found