Type Error: this.getOptions is not a function For style-loader

Question

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!

Answer 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 to 2.0.0: npm i style-loader@2.0.0
• 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 css-loader@5.2.7

Summary

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