[TB] Can't create design system with latest builds

[aaronreed708]

Problem/Concern

For about the last week I've been unable to create a design system with Theme Builder. I keep getting an exception in shades.ts (from a11y-theme-builder-sdk) trying to call chroma.scale, where chroma is imported from chroma-js. The chroma object looks like it holds a path to a .cjs file (chroma.271634d07525ddfb33b4.cjs), not an object with functions, etc on it.

Evan didn't have this problem. But i noticed the failure also on the latest Docker image so not just my environment. i also noticed that the file with that path lives in code/src/ui/build/static/media/chroma.271634d07525ddfb33b4.cjs. In cases where this code works (in docker images built before last week), there is no chroma.xxxx.js file in code/src/ui/build/static/media. Looking at the chroma-js repo, they released a new version, 2.6.0, that my build was picking up. Images that worked didn't have this version, they had v2.4.2. When I forced my package.json to use v2.4.2, the code worked again.

I created issue gka/chroma.js#346 against chroma-js to report the problem. Perhaps the issues is that there isn't a new @types/chroma-js, yet, to accompany the new version of chroma-js?

Proposed Solution

I propose that we should hardcode the path of chroma-js until this issue is resolved.

[aaronreed708]

Heard back from the chroma-js owner. He said that in the latest version, "we refactored chroma.js to ES6 modules and changed the way, the code is imported". When I changed the code to import from the module like they described, this issue still remained.

So I did some more Googling. From what I can tell, we have the problem described here: facebook/create-react-app#12700.

And our issue does not occur if I manually make this change outlined in the PR facebook/create-react-app#12352 in my node_modules/react-scripts/config/webpack.config.js.

I'm going to look at doing this approach: facebook/create-react-app#11889 (comment) since modifying react-scripts is not going to fly :-)

[aaronreed708]

Fixed in commit: 0a1666d. Verified on dev. Closing.