Storybook: Custom Webpack Config issue with import in MDX

[vinceumo]

Hi

Describe the bug

I'm trying to set up a basic webpack config for scss files. I try to set up a custom webpack so I can use style-resources-loader, I got some errors, I then tried to use the config provided in the documention see my config as follow:

const path = require('path');

module.exports = async ({ config, mode }) => {
  config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../'),
  });
  return config;
};

But when running storybook I get the following error (both on node 10.16.0 and 12.13.0):

Module build failed (from ./node_modules/react-scripts/node_modules/sass-loader/lib/loader.js):

.test {
^
      Invalid CSS after "v": expected 1 selector or at-rule, was "var content = requi"
      in /Users/211103/Documents/projects/storybook-test-webpack/src/test/_test.scss (line 1, column 1)

To Reproduce

I set up a basic repo with the issue. If the webpack file is empty scss can be imported without errors.

https://github.com/vinceumo/storybook-test-webpack

System:

Environment Info:

System:
OS: macOS Mojave 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 78.0.3904.70
Firefox: 70.0
Safari: 13.0.3
npmPackages:
@storybook/addon-a11y: ^5.2.5 => 5.2.5
@storybook/addon-actions: ^5.2.5 => 5.2.5
@storybook/addon-docs: ^5.2.5 => 5.2.5
@storybook/addon-links: ^5.2.5 => 5.2.5
@storybook/addon-notes: ^5.2.5 => 5.2.5
@storybook/addon-viewport: ^5.2.5 => 5.2.5
@storybook/addons: ^5.2.5 => 5.2.5
@storybook/react: ^5.2.5 => 5.2.5

Additional context

I'm looking into style-resources-loader as I experience a odd behavior, when I import a scss that import an other scss file (that import other scss files, It is all my varibles, functions and mixins) into my MDX story, the build or dev process get stuck and I get no error message.

32% building 187/211 modules 24 active /Users/211103/Documents/projects/tbsi-patternLibraryProject/node_modules/core-js/internals/wrapped-well-known-symbol.js

Most of a the time around 32% but the file change. If I remove the scss import in my component scss, then storybook run as expected.

I was unable to replicate the issue in isolation, and can't share this project.

If I remove my node_module and run yarn then it works the first time. But then if I rerun a second time I get the same Issue.

Thanks a lot

[shilman]

@vinceumo did you try storybook's scss preset? doubt it will solve your problem, but worth a try: https://www.npmjs.com/package/@storybook/preset-scss

[vinceumo]

I just tried scss preset. I removed the webpack config and set up the scss present but doesn't I get a warning when used with MDX

WARNING in ./src/test/test.stories.mdx 4:0
Module parse failed: Unexpected token (4:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import "./_test.scss";
| 
> <Meta title="UI" />
| 
| # Sticky Title
 @ ./src sync \.stories\.(mdx|js)$ ./test/test.stories.mdx
 @ ./.storybook/config.js

If I remove the present the warning goes away. I just created a branch with the issue https://github.com/vinceumo/storybook-test-webpack/tree/preset-scss.

But I don't think this present will fix my issues.

Thanks for your help

[vinceumo]

As well regarding the build being stuck at 32% building 187/211. If I rename/move a story to an other folder then the build works, and if I run again then it get stuck again.

I tried on a few machine and same issue.

[vinceumo]

Regarding my issue regarding storybook being stuck at 32%, I found a solution. The issue is node sass. It can be fixed by changing the storybook scripts to:

"scripts": {
    "storybook": "UV_THREADPOOL_SIZE=100 start-storybook -p 6006",
    "build-storybook": "UV_THREADPOOL_SIZE=100 build-storybook"
  },

Related issue: https://github.com/sass/node-sass/issues/857

[vinceumo]

Still no luck regarding the custom webpack config

[shilman]

@mrmckeb Is there a recommended way to override webpack config in a CRA app?

[mrmckeb]

@shilman - not officially. There are tools like Craco, Rescripts, etc that allow it.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[sw-yx]

also reporting this issue but i dont have the storybook being stuck problem. the preset just doesnt work with mdx for me. hmm.

[shilman]

@sw-yx do you have a repro i can look at? if it helps, i put together a short walkthrough of setting up Typescript / CSF / MDX in one go:

https://gist.github.com/shilman/bc9cbedb2a7efb5ec6710337cbd20c0c

[sw-yx]

no, sorry i just tried converting the netlify codebase to use storybook 5.3 with mdx stories and the mdx part didnt work at all. felt like the preset wasn't working, but had no way to check. i'll follow your walkthru to get a feel from scratch.

[shilman]

@sw-yx i've also seen an increase yarn issues that get resolved by clearing node_modules and reinstalling. 😭 i assume you've already tried that.

happy to help you debug your preset. can you paste that part of your config here?

[sw-yx]

am traveling now but will do when i get back. maybe one actionable item is to log out in console or somewhere in the ui what presets and addons have been registered (at the global level since it doesnt make sense to log out every little thing). found myself wishing for more visibility as i tried to reason out where things were going wrong.

[blacklight66]

Just had the same issue, was working yesterday and won't build today with no file changes.

[ricovitch]

@sw-yx do you have a repro i can look at? if it helps, i put together a short walkthrough of setting up Typescript / CSF / MDX in one go:

https://gist.github.com/shilman/bc9cbedb2a7efb5ec6710337cbd20c0c

Saved my day thank you ! 🙏

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!