Type Error: this.getOptions is not a function For style-loader
Solution 1
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 to2.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 to5.2.7
:npm i [email protected]
Summary
By downgrading all of the loaders one major version, I was able to get it to work.
Solution 2
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]
Bryan Guillen
Updated on February 18, 2022Comments
-
Bryan Guillen about 2 years
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!
-
Jadam almost 3 yearsdowngrading just style-loader got it to work for me. Thanks!
-
Bryan Guillen almost 3 yearsNice! Glad it helped!
-
Sudarshan over 2 yearsYou saved my life, I literally spent 1 week because of this thing. Downgrading style-loader and css-loader worked for me as well.
-
Bryan Guillen over 2 yearsAwesome! Glad I was able to help.
-
AtAFork over 2 yearsThanks! A combination of this answer and this thread helped: github.com/storybookjs/storybook/issues/12464
-
David Pascoal about 2 yearsThe key dependency for me was the [email protected]. All the rest was optional.