类型错误：this.getOptions不是一个函数，适用于style-loader

Question

类型错误：this.getOptions不是一个函数，适用于style-loader

reactjswebpackstorybookwebpack-style-loader

41

问题

在使用Storybook时，我运行npm run storybook，并收到以下错误信息：

ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function

背景/上下文

我的目标是让Storybook能够使用sass。

设置很简单：我有被组件文件所引入的scss文件。

在寻找实现方式时，我遇到了一个能够做到这一点的附加组件，请参见此处。基本上，你可以运行npm i --save-dev @storybook/preset-scss style-loader css-loader sass-loader。

在这样做时，我遇到了我的第一个错误。这是同样的错误，但是对于sass-loader来说。这个Stack Overflow线程帮助我解决了那个错误。

所以，总之，我已经尝试过：

跟着文档（上面链接）走
跟着Stack Overflow线程（上面的链接）走

相关开发依赖

"@storybook/preset-scss": "^1.0.3",
"css-loader": "^6.2.0",
"sass-loader": "^10.1.1",
"style-loader": "^3.2.1"

提前感谢！

- Bryan Guillen

6个回答

36

当我在设置storybook中的sass时，也遇到了这个问题。自述文件提供的yarn脚本将安装那些不再与storybook运行的webpack 4兼容的最新库版本。

对于任何遇到storybook问题的人，这是你可以运行的替代方法。

yarn add -D @storybook/preset-scss css-loader@5.2.6 sass sass-loader@10.1.1 style-loader@2.0.0

- Jadam

对我来说，关键的依赖是style-loader@2.0.0。其余的都是可选的。 - David Pascoal

4

旧版本的webpack不支持最新版本的CSS加载器：

yarn add -D @storybook/preset-scss css-loader@5.2.6 sass sass-loader@10.1.1 style-loader@2.0.0

这对我很有效。

- srinivas teja

这并没有真正回答问题。如果您有不同的问题，可以通过点击提问来提出。如果您想在此问题获得新的答案时得到通知，您可以关注此问题。一旦您拥有足够的声望，您还可以添加悬赏以吸引更多关注。- 来自审核 - treckstar

这是一个早期答案的完全副本。 - Dheeraj Vepakomma

1

降级后，在我的情况下，我解决了这个问题，只需注释掉加载器scss和sass：

{
                test: /\.css$/,
                use:
                    [
                        {
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                modules: true
                            }
                        }
                        // ,
                        // {
                        //     loader: 'sass-loader'
                        // }
                        // ,
                        // {
                        //     loader: 'scss-loader'
                        // }
                    ]
            }

声明模块“*.module.css”没有影响结果。

记住：始终运行

npm start

测试这些配置更改，看看是否会发生什么变化。这样做将为我节省今天下午的时间。

- Sterling Diaz

将 "style-loader": "^3.3.1" 降级为 "style-loader": "^2.0.0" 对我来说解决了这个问题。 - Edward Olamisan

将 "style-loader": "^3.3.1" 降级为 "style-loader": "^2.0.0" 解决了我的问题。 - undefined

0

我在我的React应用程序中遇到了相同的错误 -

    ERROR in ./src/css/main.css
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: getValidate(...) is not a function
    at Object.getOptions (D:\RND\React-webpack\node_modules\webpack\lib\NormalModule.js:587:19)
    at Object.loader (D:\RND\React-webpack\node_modules\style-loader\dist\index.js:19:24)
 @ ./src/index.js 4:0-24

我通过以下命令解决了这个问题：首先，我运行了一个命令npm ls 我得到了以下建议：

npm ERR! missing: schema-utils@3.1.1, required by webpack@5.76.3

所以，我已经安装了 schema-utils@3.1.1

npm i schema-utils@3.1.1 --save-dev

这已经解决了 getValidate(...) 不是一个函数 的错误。

- Debashis Chowdhury

0

我没有使用Storybooks，只是用Webpack和TS。我所要做的就是运行以下命令：

yarn add -D css-loader@5.2.6 style-loader@2.0.0

然后，我从我的webpack配置中删除了scss/sass loader，并将其设置为以下内容：

      {
        test: /\.(css)$/,
        loaders: ['style-loader', 'css-loader'],
      },

希望这能帮到任何人。

- Coder Gautam YT

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bryan Guillen · Accepted Answer

解决方案

退一步想，我意识到我可以尝试用我解决sass-loader问题的方法: 降低主要版本号。

步骤

将 style-loader 的主要版本号降低1个版本至 2.0.0: npm i style-loader@2.0.0
然后，碰巧的是，我遇到了同样的问题。css-loader
将 css-loader 的主要版本号降低1个版本至 5.2.7: npm i css-loader@5.2.7

总结

通过降低所有加载器的主要版本号，我成功地解决了这个问题。