CSS @import throws error

[andykenward]

Describe the bug

When using CSS @import in a .css the below error is thrown.

ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: url.startsWith is not a function

Your minimal, reproducible example

https://github.com/andykenward/storybook-addon-next/commit/4a67992f3aa3e809944b38eb961e02892bee48a3

Steps to reproduce

1. Add a your-file.css file to styles folder. Perhaps with some css in the file.
2. Add @import './your-file.css' into styles/global.css.
3. Try to run storybook yarn storybook.

You should get an error and crash.

Expected behavior

To support @import in .css files.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• MacOS 12.1
• Node 14.18.2 & 16.13.0

storybook-addon-next version

1.4.1

Additional context

This does not happen in version 1.4.0.

[RyanClementsHax]

Thanks for opening the issue!

The pull request above fixes the error although I'm not happy with the solution. I think there is a better one I'm missing. The details are spelled out in the pull request description.

By any chance do you have insight?

[andykenward]

By any chance do you have insight?

Sorry, I don't

[andykenward]

@RyanClementsHax Thanks for resolving this so quickly!

[RyanClementsHax]

So it turns out that @storybook/builder-webpack4 includes css-loader v3.x in its dependencies. Because of this, the resolved version of css-loader used is v3.x.

Because @storybook/builder-webpack4 is included from installing core storybook packages like @storybook/addon-essentials and @storybook/react, I'll just use the solution mentioned.

@RyanClementsHax Thanks for resolving this so quickly!

No problem!

[github-actions]

🎉 This issue has been resolved in version 1.4.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[andykenward]

@RyanClementsHax Thanks for more details about the issue. I've had issues on previous storybook setups with different css-loader versions and storybook conflicting. Think I even moved everything relating to storybook into it's own project, just so we didn't have to deal with npm package conflicts in production.

It's also an issue when you use the storybook-preset-scss. Depending on the webpack version you have to install different webpack loaders. But this information isn't highlighted in the main README

webpack 4
https://github.com/storybookjs/storybook/blob/a3433c17a08d0ca8debd14f685ef4a040c77837e/docs/snippets/common/storybook-preset-scss.webpack-4.js.mdx

webpack 5
https://github.com/storybookjs/storybook/blob/a3433c17a08d0ca8debd14f685ef4a040c77837e/docs/snippets/common/storybook-preset-scss.webpack-5.js.mdx

There is also an issue with the wrong version of webpack resolving on a storybook install. Which I think is to do with npm versions and how it resolves dependencies. You can get different outcomes on a new npm install without a package-lock.json file 👎🏻
storybookjs/storybook#15336 (comment)