[Bug]: Stylus @import causes error

xxxKOTxxx commented 1 year ago

Describe the bug

I'm using Nx monorepo with Stylus CSS preprocesor and Storybook v7 with Vite bundler.

My goal is to use shared styles library for React and Vue3 UI components library. I've solved bundling issue with This solution and my libraries pass build process with @import resolving totally fine. But Storybook fails independent of configuration.

In frontend i got: TypeError: Failed to fetch dynamically imported module: ... in console:

 [vite] Internal server error: [postcss] /Users/.../libraries/vue-ui/src/lib/Badge/Badge.vue?vue&type=style&index=0&scoped=681721c9&lang.stylus:1:1: Unknown word
  Plugin: vite:css
  File: /Users/.../libraries/vue-ui/src/lib/Badge/Badge.vue?vue&type=style&index=0&scoped=681721c9&lang.stylus:1:1
  1  |  
     |   ^
  2  |    @import "~@mydse/styles/components/Badge.styl"

How can I fix this issue?

To Reproduce

Looks like any usage of @import ... in stylus file or Vue styles section causes issue. All projects are generated with Nx library

System

Environment Info:

  System:
    OS: macOS 13.4
    CPU: (12) arm64 Apple M2 Max
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.133
    Firefox: 114.0.1
    Safari: 16.5
  npmPackages:
    @storybook/addon-essentials: 7.0.22 => 7.0.22 
    @storybook/core-common: ^7.0.22 => 7.0.22 
    @storybook/core-server: 7.0.22 => 7.0.22 
    @storybook/react: 7.0.22 => 7.0.22 
    @storybook/react-vite: 7.0.22 => 7.0.22 
    @storybook/vue3: ^7.0.22 => 7.0.22 
    @storybook/vue3-vite: 7.0.22 => 7.0.22

Additional context

No response

xxxKOTxxx commented 1 year ago

P.S. after checking Your documentation I have another question: do You support Stylus at all? There is totally nothing about it - just issues regarding webpack.

shilman commented 1 year ago

@xxxKOTxxx possibly fixed in 7.0.24 by https://github.com/storybookjs/storybook/pull/22486 which claims to fix stylus support. we don't explicitly support stylus, but under the hood storybook is just webpack or vite, both which I assume support stylus, which means that you should be able to get support by configuration.

shilman commented 1 year ago

cc @Integrayshaun

xxxKOTxxx commented 1 year ago

Thanks for reply! I'll wati for release to check is it works now!

7.0.24

When do You plan to release this version?

xxxKOTxxx commented 1 year ago

Tested - no changes. I'll try to migrate on webpack and try solutions for it.

xxxKOTxxx commented 1 year ago

With webpack5 also problem described here

xxxKOTxxx commented 1 year ago

Tested on 7.0.25 - no progress

xxxKOTxxx commented 1 year ago

For those who also has problem with stylus, as workaround I can propose t use patch-package package to patch node_modules/@storybook/core-common/dist/index.js file untill PR wiill be released in Storybook. Just replace

...hookIgnoreNodeModules:!1,tsconfigRaw:...

with

...hookIgnoreNodeModules:!1,keepNames:true,tsconfigRaw:...

and follow package documentation

storybookjs / storybook