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

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

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 4
Comments: 17 (9 by maintainers)

Most upvoted comments

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 on Jun 1, 2023

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.

AumyF on Apr 14, 2023

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

youngboy on May 9, 2023

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

MrSunshyne on Apr 21, 2023

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

keepNames still not present in v7.0.24
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

youngboy on Jun 28, 2023

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

EvHaus on Jun 27, 2023

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)

FRobaglia on Jun 23, 2023

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.

AlekseyPn on Jun 6, 2023

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

jamieathans on May 1, 2023

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

EvHaus on Mar 14, 2023