未捕获的类型错误：WEBPACK_IMPORTED_MODULE_1__.default 未定义（React、SASS、SCSS）
Posted
技术标签:
【中文标题】未捕获的类型错误：WEBPACK_IMPORTED_MODULE_1__.default 未定义（React、SASS、SCSS）【英文标题】：Uncaught TypeError: WEBPACK_IMPORTED_MODULE_1__.default is undefined (React, SASS,SCSS) 【发布时间】：2021-01-26 16:30:09 【问题描述】：我在设置我的新 React 项目的过程中陷入困境。 我正在使用 webpack、webpack-dev-middleware、express 等来实现自定义服务器。 我在导入我的 scss (sass) 文件时遇到问题。
在我的浏览器控制台上引发以下错误
Uncaught TypeError: _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_postcss_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_3_use_4_style_scss__WEBPACK_IMPORTED_MODULE_1__.default is undefined
我的终端也显示以下警告但编译项目
WARNING in ./src/styles/style.scss 13:15-29
export 'default' (imported as 'content') was not found in '!!../../node_modules/mini-css-extract-plugin/dist/loader.js!../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[4]!./style.scss' (possible exports: )
这是我的文件：
package.json
"name": "XYXYXY",
"version": "0.1.0",
"private": true,
"author": "XYZ",
"license": "Proprietary",
"dependencies":
"@popperjs/core": "^2.5.3",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.0.4",
"@testing-library/user-event": "^12.1.7",
"acorn": "^6.4.2",
"axios": "^0.20.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.5.2",
"html2canvas": "^1.0.0-rc.7",
"jquery": "^3.5.1",
"jspdf": "^2.1.1",
"lodash": "^4.17.20",
"moment": "^2.29.1",
"mongoose": "^5.10.9",
"nodemon": "^2.0.4",
"popper.js": "^1.16.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-router-dom": "^4.0.4",
"react-tooltip": "^4.2.10",
"redux": "^4.0.5",
"redux-form": "^8.3.6",
"redux-thunk": "^2.3.0",
"typescript": "^4.0.3",
"url-loader": "^1.1.2"
,
"scripts":
"start": "nodemon server.js",
"clean": "rimraf public",
"build": "NODE_ENV=production npm run clean && webpack --progress"
,
"devDependencies":
"@babel/core": "^7.11.6",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"autoprefixer": "^10.0.1",
"babel-loader": "^8.1.0",
"css-loader": "^4.3.0",
"eslint": "^7.11.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.21.4",
"eslint-plugin-react-hooks": "^4.1.2",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.0.0",
"node-sass": "^4.14.1",
"postcss": "^8.1.1",
"postcss-loader": "^4.0.4",
"rimraf": "^3.0.2",
"sass-loader": "^10.0.3",
"style-loader": "^2.0.0",
"webpack": "^5.0.0",
"webpack-cli": "^4.0.0",
"webpack-dev-middleware": "4.0.0-rc.3",
"webpack-dev-server": "^3.11.0"
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const env = process.env.NODE_ENV;
const VENDOR_LIBS = [
'lodash', 'react', 'react-dom', 'react-redux',
'redux', 'axios',
];
module.exports =
mode: env || 'development',
entry:
bundle: ['babel-polyfill', './src/index.js'],
vendor: VENDOR_LIBS,
,
output:
path: path.join(__dirname, 'public'),
publicPath: '/',
filename: '[name].[chunkhash].js',
,
devtool: 'inline-source-map',
devServer:
historyApiFallback: true,
contentBase: './public',
,
module:
rules: [
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
,
use: ['style-loader', 'css-loader'],
test: /\.css$/,
,
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
loader: 'babel-loader',
options:
presets: [
'@babel/env',
'@babel/react',
'plugins': ['@babel/plugin-proposal-class-properties'] ,
],
,
,
],
,
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
loader: 'sass-loader',
options:
implementation: require('node-sass'),
,
,
],
,
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader',
options:
limit: 100000,
,
,
],
,
plugins: [
new HtmlWebpackPlugin(
template: 'src/index.html',
),
new MiniCssExtractPlugin(
filename: 'style.[contenthash].css',
),
new webpack.DefinePlugin(
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
),
],
;
server.js
const express = require('express');
const path = require('path');
const app = express();
if(process.env.NODE_ENV!== 'production')
const default: webpackMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');
app.use(webpackMiddleware(webpack(webpackConfig)));
else
app.use(express.static('public'));
app.get('*',(req,res)=>
res.sendFile(path.join(__dirname,'public/index.html'));
);
app.listen(process.env.PORT || 3050, () => console.log('Listening'));
到目前为止，我已经浪费了几个小时，但现在看起来我被困住了。 任何帮助都深表感谢。
我到目前为止所尝试的
重构并重新安装node-sass包
将我的依赖项更新到最新版本
查看关于 webpack、webpack-dev-middleware 等的 github 问题
查看类似的 SO 问题，但无法找到与我完全相同的问题
注意：我认为问题是由于适用于 saas（scss 文件）的库集不兼容/问题造成的。看看css-loaderstyle-loaderpostcss-loadersass-loadernode-sass。可能是我在配置中搞砸了。
【问题讨论】：
【参考方案1】：如果您或其他人仍在为 MiniCssExtractPlugin 和“导出默认错误”而苦苦挣扎，这里有一个可能的解决方案：
loader: MiniCssExtractPlugin.loader,
options:
esModule: false
,
在 MinisCssExtractPlugin 的 optins 中将 esModule 设置为 false
【讨论】：
【参考方案2】：在你webpack.config.js
test: /\.scss$/,
use: [
'style-loader', <-----
MiniCssExtractPlugin.loader, <------
'css-loader',
'postcss-loader',
loader: 'sass-loader',
options:
implementation: require('node-sass'),
,
,
],
,
只选择一个：'style-loader' 或 MiniCssExtractPlugin.loader（我放
【讨论】：
谢谢这是解决方案。但是，我想要的加载器是基于模式（生产/开发）的。因此下面的代码会更好env === 'production' ? MiniCssExtractPlugin.loader : 'style-loader'以上是关于未捕获的类型错误：WEBPACK_IMPORTED_MODULE_1__.default 未定义（React、SASS、SCSS）的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的类型错误：无法读取未定义的属性 toLowerCase
JQuery：未捕获的类型错误：无法读取未定义的属性“调用”