[7.0 alpha] webpack stylus loader doesn't work anymore

[EvHaus]

Describe the bug After upgrading from 6.5.10 to 7.0.0-alpha.26 I'm running into an issue with stylus-loader. When starting Storybook, I get this failure:

WARN Force closed manager build
/Users/me/myproject/node_modules/webpack/lib/NormalModule.js:758
                const error = new ModuleBuildError(err, {
                              ^

ModuleBuildError: Module build failed (from ../node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) /Users/me/myproject/client/webapp/src/stylus/main-webapp.styl Unknown word

> 1 | [Root]
    | ^

    at null.processResult (/Users/me/myproject/node_modules/webpack/lib/NormalModule.js:758:19)
    at null.<anonymous> (/Users/me/myproject/node_modules/webpack/lib/NormalModule.js:860:5)
    at null.<anonymous> (/Users/me/myproject/node_modules/loader-runner/lib/LoaderRunner.js:399:11)
    at null.<anonymous> (/Users/me/myproject/node_modules/loader-runner/lib/LoaderRunner.js:251:18)
    at null.context.callback (/Users/me/myproject/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/me/myproject/node_modules/css-loader/dist/index.js:143:5)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

The loader that causes this issue is:

{
    test: /\.styl$/,
    use: ['style-loader', 'css-loader', 'stylus-loader'],
}

This problem doesn't happen with the same configuration on Storybook 6.5.10.

To Reproduce

• Minimal reproduction repo is here: https://github.com/EvHaus/storybook-7-stylus-bug
• The diff showing the only changes is here: https://github.com/EvHaus/storybook-7-stylus-bug/commit/06e242b49b707de7fc289f5fa855a29aa7ddf111
• To reproduce, clone the repo, run yarn to install dependencies and then run yarn storybook. The output in the terminal will be:

WARN Force closed manager build
/Users/evhaus/Git/storybook-stylus-bug/node_modules/webpack/lib/NormalModule.js:758
                const error = new ModuleBuildError(err, {
                              ^

ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) /Users/evhaus/Git/storybook-stylus-bug/stories/button.styl Unknown word

> 1 | [Root]
    | ^

    at null.processResult (/Users/evhaus/Git/storybook-stylus-bug/node_modules/webpack/lib/NormalModule.js:758:19)
    at null.<anonymous> (/Users/evhaus/Git/storybook-stylus-bug/node_modules/webpack/lib/NormalModule.js:860:5)
    at null.<anonymous> (/Users/evhaus/Git/storybook-stylus-bug/node_modules/loader-runner/lib/LoaderRunner.js:400:11)
    at null.<anonymous> (/Users/evhaus/Git/storybook-stylus-bug/node_modules/loader-runner/lib/LoaderRunner.js:252:18)
    at null.context.callback (/Users/evhaus/Git/storybook-stylus-bug/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/evhaus/Git/storybook-stylus-bug/node_modules/css-loader/dist/index.js:143:5)

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

System

  System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.14.1 - ~/.nvm/versions/node/v16.14.1/bin/node
    Yarn: 3.2.3 - /opt/homebrew/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.1/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Firefox: 103.0.2
    Safari: 15.6.1
  npmPackages:
    @storybook/addon-actions: ^7.0.0-alpha.26 => 7.0.0-alpha.26 
    @storybook/addon-docs: ^7.0.0-alpha.26 => 7.0.0-alpha.26 
    @storybook/addon-essentials: ^7.0.0-alpha.26 => 7.0.0-alpha.26 
    @storybook/addon-interactions: ^7.0.0-alpha.26 => 7.0.0-alpha.26 
    @storybook/addon-links: ^7.0.0-alpha.26 => 7.0.0-alpha.26 
    @storybook/react-webpack5: ^7.0.0-alpha.26 => 7.0.0-alpha.26 
    @storybook/testing-library: ^0.0.14-next.0 => 0.0.14-next.0 

Additional context

N/A

[EvHaus]

Just confirming this is still an issue in 7.0.0-rc.3. I haven't been able to find any workaround yet.

[shilman]

One of the main differences between 6.5 and 7.0 is that 6.5 is webpack4 by default and 7.0 is webpack5 only. Is the version of stylus-loader you're using webpack5 compatible?

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack4-support-discontinued

[EvHaus]

Yes, it's webpack5-compatible. I'm using the latest version and my main app build is using webpack 5.

[ramirozap]

I'm having the same issue on 7.0.0-rc.8, even tried a different loader https://github.com/slightlyfaulty/stylus-native-loader and gives the same error. The main app is running fine with webpack 5 and the same loader configuration as storybook

[AumyF]

I created a reproduction repository using Storybook 7.0.2. https://github.com/AumyF/repro-storybook7-stylus

[Root] is the string representation of Stylus's AST root node (src).

The implementation of stylus compiler depends on AST node constructors' name such as Root, which is renamed like Root2 during storybook dev or build. https://github.com/stylus/stylus/blob/73708f31a28bbf289896036c12d0e500bda3605b/lib/visitor/index.js#L26-L30

When the compiler couldn't find a method corresponding to an AST node it just returns the AST object instead of compiled CSS source string. It's passed to the latter loader (typically css-loader) and it reports a syntax error.

It was not clear why the variable names were rewritten only on Storybook 7.

[MrSunshyne]

Can confirm this is also happening when the builder is Vite. Unknown word error. Switching to another preprocessor doesn't cause the error, but stylus + SB7 + Vite simply breaks

[jamieathans]

Issue still exists as of Storybook 7.0.7 - can anyone think of any workarounds (using webpack 5)?

[youngboy]

I think I may found the issue causing it.

this is where to set keepNames of esbuild conf

https://github.com/storybookjs/storybook/blob/next/code/lib/core-common/src/utils/interpret-require.ts#L11-L23

[AlekseyPn]

Hi. Is there any updates about stylus + vue + vite build for this issue? I have troubles with vue-vite build and stylus styles version 7.0.13 doesn't work with stylus

[AlekseyPn]

Hi. Is there any updates about stylus + vue + vite build for this issue? I have troubles with vue-vite build and stylus styles version 7.0.13 doesn't work with stylus

I have downgraded storybook version to 6.5.16 and it solved my problem.

[EvHaus]

Just tried 7.0.23 which has the PR that should fix the problem but I'm still getting the error. Is there some setting or flag I need to enable first?

[ndelangen]

@youngboy if the PR doesn't address this issue, we should probably revert the PR.?

[FRobaglia]

Hi, the PR resolves the issue, but it looks like it's not present in the code when using v7.0.23

(see node_modules/@storybook/core-common/dist/index.js, no occurences of keepNames is found. Adding it manually does fix the problem)

[ndelangen]

Will be part of https://github.com/storybookjs/storybook/pull/23185

[EvHaus]

Unfortunately the issue is still happening for me with v7.0.24. I've updated the repro repo here: https://github.com/EvHaus/storybook-7-stylus-bug

[youngboy]

Unfortunately the issue is still happening for me with v7.0.24. I've updated the repro repo here: https://github.com/EvHaus/storybook-7-stylus-bug

seems there are two issues here

1. keepNames still not present in v7.0.24
2. in this repo set keepNames: true throw ReferenceError: __name is not defined error (looks like conflict with Webpack css-loader); switch to @storybook/react-vite framework is working

Maybe by default storybook should turn keepNames off, and expose a configuration option to turn it on, more info see https://github.com/vitejs/vite/pull/2376#issuecomment-805285480

[ryota-ka]

I've retried to build an app w/ Stylus on Storybook v7.6.4, and it all worked.