reactjs - TypeError: this.getOptions bir fonksiyon değil (vue değil) - storybook

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

HATA ./src/client/components/Button/styles.scss Modül derlemesi başarısız oldu (./node_modules/style-loader/dist/cjs.js üzerinden): TypeError: this.getOptions bir fonksiyon değil

Hata style-loader üzerinde oluşuyor, ama ben onu bile kullanmıyorum, bu, typescript dosyamda scss dosyası kullandığım için oluyor. Aşağıda .storybook/main.js dosyamı görebilirsiniz

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

Oraya da yükleyiciler eklemeyi denedim

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

Webpack dosyamda olduğu gibi, ama hâlâ çalışmıyor, webpack 5 sürümünü kullanıyorum, sass-loader@10 yapma önerilerini gördüm, ama o da çalışmıyor. Fikirleriniz var mı?

Derleme sırasında, storybook'un webpack 4 kullandığını görüyorum, belki de bunun nedeni budur

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

Cevap #1

Ben de aynı sorunu yaşadım. Andrey Radkevich, yorumunuz çözülmesine yardımcı oldu.

Problem

node-sass, storybook webpack 4 kullanırken webpack 5’e bağımlıdır

Çözüm

Storybook'inizi burada açıklandığı gibi webpack 5 kullanacak şekilde güncelleyin

İlgili makaleler