TypeError：this.getOptions不是一个函数（不是vue）-故事书

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"
  },

./src/client/components/Button/styles.scss 中出现错误 模块构建失败（来自 ./node_modules/style-loader/dist/cjs.js）： 类型错误：this.getOptions 不是一个函数

错误发生在

style-loader

上，但我什至不使用它，它发生是因为我在我的

scss

文件中使用了

typescript

文件。下面你可以看到我的

.storybook/main.js

文件

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;
  },
};

我也尝试在那里添加加载程序

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

与我的 webpack 文件中的相同，但它仍然不起作用，我使用

webpack 5

版本，我已经看到了制作

sass-loader@10

的建议，但它也不起作用。有什么想法吗？

在构建时，我看到故事书使用了

webpack 4

，也许这就是原因

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

Answer 1

我也有同样的问题。 Andrey Radkevich 您的评论有助于解决此问题。

问题

node-sass

取决于

webpack 5

而故事书则使用

webpack 4

解决方案

更新您的故事书以使用

webpack 5

，如此处

所述