Color story is not rendering

[ojeytonwilliams]

It seems like something is wrong with the Storybook/webpack/postcss config since the imported colors.css

ui/src/color-system/color-system.tsx

Line 3 in 3f53bf3

import colorList from "../colors.css";

is undefined, leading to the following errors.

Production:

ReferenceError: Cannot access 'color_system_stories' before initialization
    at Module.default (https://opensource.freecodecamp.org/ui/color-system-color-system-stories.c183092e.iframe.bundle.js:1:385)
    at processCSFFile (https://opensource.freecodecamp.org/ui/sb-preview/runtime.js:100:1907)
    at StoryStore.memoizerific [as processCSFFileWithCache] (https://opensource.freecodecamp.org/ui/sb-preview/runtime.js:1:4751)
    at CsfDocsRender.prepare (https://opensource.freecodecamp.org/ui/sb-preview/runtime.js:121:900)
    at async PreviewWeb.renderSelection (https://opensource.freecodecamp.org/ui/sb-preview/runtime.js:121:9522)

Development:

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at ./src/color-system/color-system.tsx (http://localhost:6006/color-system-color-system-stories.iframe.bundle.js:62:37)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:323:21)
    at ./src/color-system/color-system.stories.tsx (http://localhost:6006/color-system-color-system-stories.iframe.bundle.js:17:71)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:323:21)
    at http://localhost:6006/main.iframe.bundle.js:2839:10
    at async StoryStore.importFn (http://localhost:6006/main.iframe.bundle.js:92:27)
    at async Promise.all (index 0)

https://opensource.freecodecamp.org/ui/?path=/docs/design-system-color--docs

[huyenltnguyen]

I've spent hours on this issue, and I think the fix for it isn't trivial.

My investigation so far:

• The Color story was added by chore(tools): split color tokens to separate layers freeCodeCamp#42388
• The component library at that point was very simple: https://github.com/huyenltnguyen/freeCodeCamp/tree/8ef368732cec9f4fa4acc6321d1ca21625f17508/tools/ui-components. We didn't have to add any CSS loader, but was able to import the CSS variables into the React component (the proof is the screenshot in the PR description)
• The most recent changes to our loaders were made during the Storybook upgrade, where we replaced the deprecated @storybook/addon-postcss with @storybook/addon-styling-webpack: https://github.com/freeCodeCamp/freeCodeCamp/pull/53809/files#diff-a03225c4e8f7e75af215f26e4a514549a2d1232424623783470b20a8d0261cdbL8
• @storybook/addon-styling-webpack has webpack listed as a peer dependency: https://github.com/storybookjs/addon-styling-webpack/blob/main/package.json#L64, but we aren't using webpack

I'll try adding webpack in to see if that would resolve the issue. But if webpack turns out to be the resolution, we might want to take a step back and revisit our tooling as I don't think it would make sense to use both webpack and rollup.

[ojeytonwilliams]

I'm not sure, to be honest. I spent a fair bit of time on this and it was far from obvious.

That said, it's fairly clear that a bundler will be necessary.

revisit our tooling as I don't think it would make sense to use both webpack and rollup.

Agreed. I suspect moving to webpack is the way to go, but I'm not sure.