41

Problem

While using Storybook, I am running npm run storybook and getting the error below.

ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function

Background/Context

My goal is to get Storybook to be able to work with sass.

The setup is a simple one: I have scss files that get imported by the component file.

In looking up ways to accomplish this, I came across an addon to be able to do so, see this. Essentially, you can run npm i --save-dev @storybook/preset-scss style-loader css-loader sass-loader.

In doing so, I encountered my first error. It was the same error, but for sass-loader. This Stack Overflow thread helped me fix that error.

So, I guess in summary, I've tried:

  • Following along with the docs (linked above)
  • Following along with the Stack Overflow thread (linked above)

Relevant Dev Dependencies

"@storybook/preset-scss": "^1.0.3",
"css-loader": "^6.2.0",
"sass-loader": "^10.1.1",
"style-loader": "^3.2.1"

Thanks ahead of time!

6 Answers 6

78

Solution

After taking a step back, I realized that I could try out what I did to fix the sass-loader issue: downgrading major versions.

Steps

  • Downgraded style-loader 1 major version to 2.0.0: npm i [email protected]
  • Then, as luck would have it, I ran into the same issue with css-loader
  • Downgraded css-loader 1 major version to 5.2.7: npm i [email protected]

Summary

By downgrading all of the loaders one major version, I was able to get it to work.

6
  • 5
    downgrading just style-loader got it to work for me. Thanks!
    – Jadam
    Aug 13, 2021 at 23:39
  • 2
    Thanks! A combination of this answer and this thread helped: github.com/storybookjs/storybook/issues/12464
    – AtAFork
    Nov 30, 2021 at 2:43
  • @BryanGuillen May i know which versions of webpack you were using? I tried the same version combination of those loaders but it was not working. Mine is webpack 3.0.0 Sep 7, 2022 at 7:02
  • 1
    Love you man. It worked for me. Nov 4, 2022 at 12:29
  • 1
    Yup, downgrading style-loader and css-loader to versions mentioned in this post worked for me as well. Thanks homies! Jan 8 at 0:01
36

I was also running into this issue when setting up sass in storybook. The yarn script the readme provides will install the latest versions of those libraries which are no longer compatible with webpack 4 which is what storybook runs on.

For anyone else running into that issue with storybook, this is what you can run instead.

yarn add -D @storybook/preset-scss [email protected] sass [email protected] [email protected]
1
4

The older webpack doesn't support the latest versions of CSS loaders:

yarn add -D @storybook/preset-scss [email protected] sass [email protected] [email protected]

this has worked for me.

2
1

After downgrading, In my case I solved it just commenting the loaders scss and sass:

{
                test: /\.css$/,
                use:
                    [
                        {
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                modules: true
                            }
                        }
                        // ,
                        // {
                        //     loader: 'sass-loader'
                        // }
                        // ,
                        // {
                        //     loader: 'scss-loader'
                        // }
                    ]
            }

The declare module "*.module.css"; did not affected the result.

REMEMBER: Always run

npm start 

to test these configuration changes to see if something happens**. Doing this would save me this afternoon.

1
  • Downgrading "style-loader": "^3.3.1" to "style-loader": "^2.0.0" solved the problem for me. Jun 29 at 15:52
0

I wasn't using Storybooks, just Webpack with TS. All I had to do was run the command:

yarn add -D [email protected] [email protected]

Then, I removed scss/sass loader from my webpack config, setting it like this:

      {
        test: /\.(css)$/,
        loaders: ['style-loader', 'css-loader'],
      },

Hope that helps anyone.

0

I have faced same error on my react app-

    ERROR in ./src/css/main.css
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: getValidate(...) is not a function
    at Object.getOptions (D:\RND\React-webpack\node_modules\webpack\lib\NormalModule.js:587:19)
    at Object.loader (D:\RND\React-webpack\node_modules\style-loader\dist\index.js:19:24)
 @ ./src/index.js 4:0-24

I had resolved this by following commands: First I had run a command npm ls I got bellow suggestion:

npm ERR! missing: [email protected], required by [email protected]

So, I have installed [email protected]

npm i [email protected] --save-dev

This has removed the error with getValidate(...) is not a function

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.