search

finos / a11y-theme-builder

DesignOps toolchain theme builder for accessibility inclusion using Atomic Design.
Apache License 2.0
46 stars 69 forks source link

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

Closed aaronreed708 closed 3 months ago

aaronreed708 commented 3 months ago

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 https://github.com/gka/chroma.js/issues/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 commented 3 months ago

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: https://github.com/facebook/create-react-app/issues/12700.

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

I'm going to look at doing this approach: https://github.com/facebook/create-react-app/issues/11889#issuecomment-1114928008 since modifying react-scripts is not going to fly :-)

aaronreed708 commented 3 months ago

Fixed in commit: https://github.com/finos/a11y-theme-builder/commit/0a1666d39782ad097dbba9d0beaef547f6d759eb. Verified on dev. Closing.