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:
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!
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
style-loader 1 major version to 2.0.0: npm i style-loader@2.0.0css-loadercss-loader 1 major version to 5.2.7: npm i css-loader@5.2.7Summary
By downgrading all of the loaders one major version, I was able to get it to work.
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 css-loader@5.2.6 sass sass-loader@10.1.1 style-loader@2.0.0
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.