Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Color story is not rendering #66

Open
ojeytonwilliams opened this issue Apr 10, 2024 · 2 comments · May be fixed by #378
Open

Color story is not rendering #66

ojeytonwilliams opened this issue Apr 10, 2024 · 2 comments · May be fixed by #378
Assignees
Labels
scope: tools/scripts Scripts for supporting dev work, generating config and build artifacts, etc. type: bug Something isn't working

Comments

@ojeytonwilliams
Copy link
Contributor

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

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 huyenltnguyen self-assigned this Apr 10, 2024
@huyenltnguyen
Copy link
Member

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

My investigation so far:

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.

@huyenltnguyen huyenltnguyen added type: bug Something isn't working scope: tools/scripts Scripts for supporting dev work, generating config and build artifacts, etc. labels Apr 11, 2024
@ojeytonwilliams
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
scope: tools/scripts Scripts for supporting dev work, generating config and build artifacts, etc. type: bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants