Reactjs React.JS:TypeError:无法读取属性'；过滤器'；findLoader处未定义的

我正在学习使用react.JS制作yelp克隆的教程（）。我不断遇到错误：

TypeError:无法读取未定义的属性“filter” 在findLoader

错误发生在我的webpack.config.js文件中，不允许我运行程序或建立与本地主机的连接

const NODE_ENV=process.ENV.NODE_ENV | | development'；
const dotenv=require（'dotenv'）；
const webpack=require（'webpack'）；
const path=require（'path'）；
const join=path.join；
const resolve=path.resolve；
const getConfig=require（'hjs-webpack'）；
const isDev=NODE_ENV==“开发”；
const isTest=NODE_ENV==“test”；
//devServer配置
const devHost=process.env.HOST | |“localhost”；
const devPort=process.env.PORT | | 3000；
const setPublicPath=process.env.SET\u PUBLIC\u PATH！='假'；
const publicPath=（isDev&&setPublicPath）`//${devHost}:${devPort}/`:''；
const root=resolve（uu dirname）；
const src=join（根，'src'）；
const modules=join（根，'node_modules'）；
const dest=join（根，“dist”）；
const css=join（src，'styles'）；
var config=getConfig({
isDev:isDev | | isTest，
in:join（src，'app.js'），
输出：dest，
html：函数（上下文）{
返回{
'index.html'：context.defaultTemplate({
标题：“FoodFinder”，
公共路径，
元：{}
})
};
}
});
//环境变量
const dotEnvVars=dotenv.config（）；
const environmentEnv=dotenv.config({
路径：join（根，'config'，`${NODE\u ENV}.config.js`），
沉默：是的
});
常量变量=
赋值（{}，dotEnvVars，environmentEnv）；
常量定义=
Object.keys（变量）
.reduce（（备忘录，键）=>{
const val=JSON.stringify（envVariables[key]）；
memo[`\${key.toUpperCase（）}\\`]=val；
返回备忘录；
}, {
__NODE_ENV:JSON.stringify（NODE_ENV），
__调试：isDev
});
config.plugins=[
新网页包。定义插件（定义）
].concat（config.plugins）；
//END ENV变量
//CSS模块
const cssModulesNames=`${isDev？'[path][name]\\\\[local]\\\':''}[hash:base64:5]`；
常量匹配cssloaders=/（^ |！）（css加载器）（$|！）/；
常量findLoader=（装入器，匹配）=>{
const found=loaders.filter（l=>l&&l.loader&&l.loader.match（匹配））；
返回找到？找到[0]：空；
};
//现有css加载器
常数cssloader=
findLoader（config.module.loaders、MatchCSSloader）；
const newloader=Object.assign（{}，cssloader{
测试：/\.module\.css$/,，
包括：[src]，
loader:cssloader.loader.replace（匹配cssloader，`1$2？modules&localIdentName=${cssModulesNames}$3`）
});
config.module.loaders.push（newloader）；
cssloader.test=newregexp（`[^module]${cssloader.test.source}`）；
cssloader.loader=newloader.loader；
config.module.loaders.push({
测试：/\.css$/,，
包括：[模块]，
加载器：“样式！css”
});
//CSS模块
//邮政编码
config.postss=[].concat([
require（'precss'）（{}），
需要（'autoprefixer'）（{}），
需要（'cssnano'）（{}）
]);
//末端邮政编码
//根
config.resolve.root=[src，modules]；
config.resolve.alias={
css:join（src，'styles'），
容器：连接（src，'containers'），
组件：连接（src，“组件”），
utils:join（src，'utils'），
样式：联接（src，“样式”）
};
//端根
//发展
如果（isDev）{
config.devServer.port=devPort；
config.devServer.hostname=devHost；
}
//测试
如果（isTest）{
config.externals={
“react/addons”：true，
“react/lib/ReactContext”：true，
“react/lib/ExecutionEnvironment”：true
};
config.module.noParse=/[/\\]sinon\.js/；
config.resolve.alias.sinon='sinon/pkg/sinon'；
config.plugins=config.plugins.filter（p=>{
const name=p.constructor.toString（）；
const fnName=name.match（/^function（.*）\（.*）/）；
常数idx=[
“重复编程”，
“UglifyJsPlugin”
].indexOf（fnName[1]）；
返回idx<0；
});
}
//结束测试
module.exports=config；

---

一般来说，我对React.JS和全栈开发都是新手，所以如果有任何帮助，我将不胜感激

一个可能的原因是，在“注册”加载器之前先查找加载器

const cssloader=findLoader（config.module.loaders，matchcssloader）；

在使用

config.module.loaders.push（…）

之前出现。很难说，因为您正在通过函数调用初始化

config

，所以我不确定初始值是多少

如果您预期

config.modules

的类型为

null | loader[]

，则可以将

findLoader

中的第一行更改为

const found=（loaders | |[]）。过滤器（…）

而且

const findLoader=（加载程序，匹配）=>{
const found=loaders.filter（l=>l&&l.loader&&l.loader.match（匹配））；
返回找到？找到[0]：空；
};

不会做你认为会发生的事。。。考虑

让x=[]//一个空数组
console.log（x？“非空”：“空”）
>“不是空的”

---

这与Python3不同，Python3中的空数组==False和

过滤器总是返回数组由@Tyler Sebastian提供的答案将不起作用，因为
const cssloader=findLoader（…）
用于根据您使用的教程查找现有的cssloader，正在推送的新加载程序将替换它

根据对教程的评论，错误似乎在于教程中使用的技术已经更新，这导致了它的崩溃。一位评论者建议的解决方案是删除您的node_modules目录，将webpack.config.js文件替换为教程repo中提供的文件，并重新安装依赖项（基本上恢复到旧版本的技术）

我认为这不是一个好方法，因为目的是学习一些有用的东西，不仅仅是让它工作，而且应该工作。因为我是一个同样缺乏经验的开发人员，试图使用这个过时的