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

EvHaus · 2022-08-29T17:44:57Z

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: EvHaus/storybook-7-stylus-bug@06e242b
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

The text was updated successfully, but these errors were encountered:

EvHaus · 2023-03-14T16:29:00Z

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

shilman · 2023-03-28T01:29:39Z

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 · 2023-03-28T02:37:49Z

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

ramirozap · 2023-03-28T08:59:20Z

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 · 2023-04-14T06:26:33Z

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 · 2023-04-21T07:08:12Z

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 · 2023-05-01T01:54:03Z

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

youngboy · 2023-05-09T07:32:12Z

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 · 2023-06-01T14:02:28Z

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 · 2023-06-06T09:05:08Z

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 · 2023-06-22T16:16:26Z

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 · 2023-06-22T16:48:30Z

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

FRobaglia · 2023-06-23T09:53:36Z

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 · 2023-06-23T10:34:24Z

Will be part of #23185

EvHaus · 2023-06-27T16:41:02Z

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 · 2023-06-28T11:41:50Z

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 vitejs/vite#2376 (comment)

ryota-ka · 2023-12-12T05:38:30Z

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

EvHaus added bug needs triage labels Aug 29, 2022

shilman added question / support configuration babel / webpack and removed bug needs triage labels Mar 28, 2023

AumyF mentioned this issue Apr 17, 2023

esbuild bundling breaks Stylus compiler due to dependency to Function.prototype.name stylus/stylus#2787

Open

FRobaglia mentioned this issue May 4, 2023

feat: upgrade to 7.0.8 birotaio/fifteen-design-system-vue#89

Closed

youngboy mentioned this issue May 10, 2023

Core: Fix compat by disabling name mangling in esbuild require #22486

Merged

5 tasks

ndelangen closed this as completed in #22486 Jun 21, 2023

ndelangen reopened this Jun 27, 2023

xxxKOTxxx mentioned this issue Jul 1, 2023

[Bug]: Stylus @import causes error #23147

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

EvHaus commented Aug 29, 2022 •

edited

Loading

EvHaus commented Mar 14, 2023

shilman commented Mar 28, 2023

EvHaus commented Mar 28, 2023 •

edited

Loading

ramirozap commented Mar 28, 2023

AumyF commented Apr 14, 2023

MrSunshyne commented Apr 21, 2023

jamieathans commented May 1, 2023 •

edited

Loading

youngboy commented May 9, 2023 •

edited

Loading

AlekseyPn commented Jun 1, 2023 •

edited

Loading

AlekseyPn commented Jun 6, 2023

EvHaus commented Jun 22, 2023

ndelangen commented Jun 22, 2023

FRobaglia commented Jun 23, 2023 •

edited

Loading

ndelangen commented Jun 23, 2023

EvHaus commented Jun 27, 2023

youngboy commented Jun 28, 2023 •

edited

Loading

ryota-ka commented Dec 12, 2023

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

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

Comments

EvHaus commented Aug 29, 2022 • edited Loading

EvHaus commented Mar 14, 2023

shilman commented Mar 28, 2023

EvHaus commented Mar 28, 2023 • edited Loading

ramirozap commented Mar 28, 2023

AumyF commented Apr 14, 2023

MrSunshyne commented Apr 21, 2023

jamieathans commented May 1, 2023 • edited Loading

youngboy commented May 9, 2023 • edited Loading

AlekseyPn commented Jun 1, 2023 • edited Loading

AlekseyPn commented Jun 6, 2023

EvHaus commented Jun 22, 2023

ndelangen commented Jun 22, 2023

FRobaglia commented Jun 23, 2023 • edited Loading

ndelangen commented Jun 23, 2023

EvHaus commented Jun 27, 2023

youngboy commented Jun 28, 2023 • edited Loading

ryota-ka commented Dec 12, 2023

EvHaus commented Aug 29, 2022 •

edited

Loading

EvHaus commented Mar 28, 2023 •

edited

Loading

jamieathans commented May 1, 2023 •

edited

Loading

youngboy commented May 9, 2023 •

edited

Loading

AlekseyPn commented Jun 1, 2023 •

edited

Loading

FRobaglia commented Jun 23, 2023 •

edited

Loading

youngboy commented Jun 28, 2023 •

edited

Loading