Issues with Storybook (REDWOOD__USER_WEB_DEFAULT_CSS doesn't exist)

Get Help and Help Others
1

Hello all,

So I’m working on a project using RedwoodJS and when I tried running

yarn rw storybook

I’m getting these errors

Initializing the Mock Service Worker at "/home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/web/public"...

Service Worker successfully created!
/home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/web/public/mockServiceWorker.js

Continue by creating a mocking definition module in your application:

https://mswjs.io/docs/getting-started/mocks

info @storybook/react v6.4.19
info 
info => Loading presets
info => Serving static files from ././public at /
info => Loading custom manager config
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modulesinfo => Loading custom manager config

info => Ignoring cached manager due to change in manager config
<i> [webpack-dev-middleware] wait until bundle finished
38% building 3/10 entries 8002/8068 dependencies 2549/3136 modulesassets by chunk 4.55 MiB (id hint: vendors)
  assets by status 4.23 MiB [big]
    asset vendors-node_modules_redwoodjs_testing_config_storybook_manager_js-node_modules_storybook_add-695773.manager.bundle.js 3.86 MiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_ScrollArea_OverlayScrollbars_js.manager.bundle.js 372 KiB [emitted] [big] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_syntaxhighlighter_syntaxhighlighter_js.manager.bundle.js 198 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_tooltip_WithTooltip_js.manager.bundle.js 115 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_ScrollArea_GlobalScrollAreaStyles_js.manager.bundle.js 15.6 KiB [emitted] (id hint: vendors)
asset runtime~main.manager.bundle.js 13.9 KiB [emitted] (name: runtime~main)
asset index.html 2.65 KiB [emitted]
asset node_modules_unfetch_dist_unfetch_js.manager.bundle.js 1.27 KiB [emitted]
asset main.manager.bundle.js 1.07 KiB [emitted] (name: main)
Entrypoint main [big] 3.88 MiB = runtime~main.manager.bundle.js 13.9 KiB vendors-node_modules_redwoodjs_testing_config_storybook_manager_js-node_modules_storybook_add-695773.manager.bundle.js 3.86 MiB main.manager.bundle.js 1.07 KiB
orphan modules 1.53 MiB [orphan] 350 modules
runtime modules 8.64 KiB 13 modules
javascript modules 4.07 MiB 841 modules
json modules 1.52 KiB
  ../node_modules/character-entities-legacy/index.json 1.24 KiB [built] [code generated]
  ../node_modules/character-reference-invalid/index.json 289 bytes [built] [code generated]
manager (webpack 5.72.0) compiled successfully in 11161 ms
99% done plugins webpack-hot-middlewarewebpack built preview 440ac047ccd25c2d8ac9 in 16030ms
ModuleNotFoundError: Module not found: Error: Can't resolve '~__REDWOOD__USER_WEB_DEFAULT_CSS' in '/home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/config/storybook'
    at /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:2016:28
    at /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:798:13
    at eval (eval at create (/home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:270:22
    at eval (eval at create (/home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:434:22
    at /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:116:11
    at /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:670:25
    at /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:855:8
    at /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:975:5
    at /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/neo-async/async.js:6883:13
    at /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:958:45
    at finishWithoutResolve (/home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/enhanced-resolve/lib/Resolver.js:312:11)
    at /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/enhanced-resolve/lib/Resolver.js:386:15
    at /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
resolve '~__REDWOOD__USER_WEB_DEFAULT_CSS' in '/home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/config/storybook'
  Parsed request is a module
  using description file: /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/package.json (relative path: ./config/storybook)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/config/storybook/node_modules doesn't exist or is not a directory
      /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/config/node_modules doesn't exist or is not a directory
      looking for modules in /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/node_modules
        single file module
          using description file: /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/package.json (relative path: ./node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS doesn't exist
            .wasm
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS.wasm doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS.jsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS.tsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS.json doesn't exist
        /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/testing/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS doesn't exist
      /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/@redwoodjs/node_modules doesn't exist or is not a directory
      /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules
        single file module
          using description file: /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/package.json (relative path: ./node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS doesn't exist
            .wasm
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS.wasm doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS.jsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS.tsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS.json doesn't exist
        /home/archcraft/Documents/syncthing/data/code-workspace/typescript/edanheim/node_modules/~__REDWOOD__USER_WEB_DEFAULT_CSS doesn't exist
      /home/archcraft/Documents/syncthing/data/code-workspace/typescript/node_modules doesn't exist or is not a directory
      /home/archcraft/Documents/syncthing/data/code-workspace/node_modules doesn't exist or is not a directory
      /home/archcraft/Documents/syncthing/data/node_modules doesn't exist or is not a directory
      /home/archcraft/Documents/syncthing/node_modules doesn't exist or is not a directory
      /home/archcraft/Documents/node_modules doesn't exist or is not a directory
      /home/archcraft/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Not sure on the next steps on how to fix this. Here’s what I did on the web folder though… The only thing I installed in there was the mantine UI library… Really good library btw but still… Not sure on where to go from here…

Thanks!

2

Hey @pacholoamit could you share more details about your web directory? The alias that it can’t resolve usually points to your project’s index.css file in web/src. I’ll have a go at setting up mantine now to see if I can reproduce it.

1 Like
3

I can reproduce this by deleting the index.css in web/src. @pacholoamit did you remove that file? The expected behavior is that it should still work if that file’s not there, but this seems to be broken right now. But just want to confirm with you to see if I’m onto something

1 Like
4

Hello, this has been resolved… Turns out this issue happens if we delete the default index.css that gets generated in the web folder as well as remove the index.css import from the App.tsx (typescript) file. Adding in the index.css file and re-importing it to App.tsx has resolved the issue. Thanks for helping me resolve the issue guys!