TypeError: this.getOptions is not a function ( not vue ) - storybook

Question

package.json

  "dependencies": {
    "express": "^4.17.1",
    "express-static-gzip": "^2.1.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet-async": "^1.1.2",
    "webpack-cli": "^4.9.1"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-docs": "^6.3.12",
    "@storybook/addon-essentials": "^6.1.21",
    "@storybook/addon-links": "^6.3.12",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.0.28",
    "@types/express": "^4.17.13",
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@typescript-eslint/eslint-plugin": "^5.2.0",
    "@typescript-eslint/parser": "^5.2.0",
    "babel-loader": "^8.2.3",
    "clean-webpack-plugin": "^4.0.0",
    "compression-webpack-plugin": "^9.0.0",
    "css-loader": "^6.5.1",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^1.7.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.4.4",
    "prettier": "^2.4.1",
    "sass": "^1.43.4",
    "sass-loader": "^12.3.0",
    "terser-webpack-plugin": "^5.2.4",
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.4",
    "webpack": "^5.61.0",
    "webpack-node-externals": "^3.0.0"
  },

ERROR in ./src/client/components/Button/styles.scss Module build failed (from ./node_modules/style-loader/dist/cjs.js): TypeError: this.getOptions is not a function

Error occurs on style-loader, but I don't even use it , it happens because I use scss file in my typescript file. Below you can see my .storybook/main.js file

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
  ],

  webpackFinal: async (config) => {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, '../src/client'),
    ];

    return config;
  },
};

I've also tried to add loaders there

config.module.rules.push({
  test: /\.scss$/,
  use: ["style-loader", "css-loader", "sass-loader"],
  include: path.resolve(__dirname, "../"),
});

same as in my webpack file , but it still doesn't work, I use webpack 5 version , I've seen advices of making sass-loader@10 , but it also doesn't work. Any ideas ?

On build, I see that storybook use webpack 4 , maybe this is the reason

✖ ｢wdm｣: Hash: 67059970e52c8e028c83
Version: webpack 4.46.0
Time: 7261ms
Built at: 11/15/2021 8:33:57 PM

Answer 1

I had the same issue. Andrey Radkevich your comment helped to get this resolved.

Problem

node-sass depends on webpack 5 while storybook uses webpack 4

Solution

Update your Storybook to use webpack 5 as described here