Module build failed: TypeError: this.getResolve is not a function at Object.loader 安装node-sass运行报错

当遇到'loader: 'sass-loader'报错TypeError: this.getResolve is not a function'时,可能是因为sass-loader版本过高。解决方法是卸载当前版本并安装较低版本的sass-loader。在确保正确安装sass并配置webpack后,如问题依旧,执行卸载再安装低版本的sass-loader即可修复问题。

找了半天,各个配置都检查了,就是报错,后来经过不懈努力终于发现,发现是 sass-loader 版本太高了

如果各位同学的配置如下,然后还是报错,就可以考虑换一个版本了

1.安装 sass

npm install node-sass --save-dev 
npm install sass-loader --save-dev

2.然后配置 build 文件夹下的 webpack.base.conf.js 文件

{
   test: /\.scss$/,
   loaders: ["style", "css", "sass"]
}

3.style标签引用

<style lang="scss">

如果以上三步,都是对的,但任然报错的话,就可以用下面这个步骤了

把 sass-loader 卸载重装低版本的

(卸载当前版本)

npm uninstall sass-loader

 (装一个低版本的)

npm install sass-loader@7.3.1 --save-dev
### 问题分析 在浏览器插件开发过程中,用户遇到了模块构建失败的错误,具体表现为: ``` Uncaught Error: Module build failed: TypeError: this.getLogger is not a function at Object.loader ``` 该错误通常与构建工具(如Webpack、Babel、Loader等)的配置或版本兼容性有关。以下是对该问题的深入分析及解决方案。 --- ### 常见原因分析 1. **Loader版本不兼容** 在Webpack构建过程中,某些Loader(如`babel-loader`、`eslint-loader`)依赖于Webpack的内部API,例如`this.getLogger`。如果使用的Loader版本过旧或与Webpack版本不兼容,可能会导致找不到该方法。 2. **Webpack配置错误** Webpack配置文件中可能存在错误的`module.rules`设置,例如未正确指定`test`、`loader`或`options`,导致构建过程中调用到了不兼容的上下文。 3. **Node.js与NPM包版本不一致** 如果Node.js版本较低,或`node_modules`未正确安装、缓存未清除,也可能导致构建失败。 4. **插件依赖未正确安装或配置** 浏览器插件开发中常依赖第三方库或构建插件,如果这些依赖未正确安装或配置,也可能引发此类错误。 --- ### 解决方案 #### 1. 检查并更新Loader版本 确保使用的Loader版本与Webpack兼容。例如,`babel-loader`在Webpack 5中需使用8.x版本: ```bash npm install babel-loader@8.x --save-dev ``` #### 2. 检查Webpack配置 在`webpack.config.js`中确保Loader配置正确。例如: ```javascript module: { rules: [ { test: /\.js$/, loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } ] } ``` #### 3. 清理Node模块并重新安装 删除`node_modules`和`package-lock.json`后重新安装依赖: ```bash rm -rf node_modules package-lock.json npm install ``` #### 4. 升级Node.js版本 确保使用的是Node.js 14.x或更高版本,以支持现代构建工具所需的API。 #### 5. 检查浏览器插件构建配置 如果是开发Chrome扩展或Firefox插件,确保构建工具支持浏览器插件的打包方式。例如,使用Webpack配置输出`chrome-extension`兼容的格式,并避免使用Node.js特定的API。 --- ### 示例代码:Webpack配置片段 ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] } }; ``` --- ### 相关问题
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值