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

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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 1
  • Comments: 16 (5 by maintainers)

Commits related to this issue

Most upvoted 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!

ok i am retrying to reproduce this. on the other hand the storybook doesn’t fail on build. this seems localized in CRA