- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在按照教程(https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/#routing)使用react.JS制作yelp克隆。我不断遇到错误:
TypeError: Cannot read property 'filter' of undefined at 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 === 'development';
const isTest = NODE_ENV === 'test';
// devServer config
const devHost = process.env.HOST || 'localhost';
const devPort = process.env.PORT || 3000;
const setPublicPath = process.env.SET_PUBLIC_PATH !== 'false';
const publicPath = (isDev && setPublicPath) ? `//${devHost}:${devPort}/` : '';
const root = resolve(__dirname);
const src = join(root, 'src');
const modules = join(root, 'node_modules');
const dest = join(root, 'dist');
const css = join(src, 'styles');
var config = getConfig({
isDev: isDev || isTest,
in: join(src, 'app.js'),
out: dest,
html: function (context) {
return {
'index.html': context.defaultTemplate({
title: 'FoodFinder',
publicPath,
meta: {}
})
};
}
});
// ENV variables
const dotEnvVars = dotenv.config();
const environmentEnv = dotenv.config({
path: join(root, 'config', `${NODE_ENV}.config.js`),
silent: true
});
const envVariables =
Object.assign({}, dotEnvVars, environmentEnv);
const defines =
Object.keys(envVariables)
.reduce((memo, key) => {
const val = JSON.stringify(envVariables[key]);
memo[`__${key.toUpperCase()}__`] = val;
return memo;
}, {
__NODE_ENV__: JSON.stringify(NODE_ENV),
__DEBUG__: isDev
});
config.plugins = [
new webpack.DefinePlugin(defines)
].concat(config.plugins);
// END ENV variables
// CSS modules
const cssModulesNames = `${isDev ? '[path][name]__[local]__' : ''}[hash:base64:5]`;
const matchCssLoaders = /(^|!)(css-loader)($|!)/;
const findLoader = (loaders, match) => {
const found = loaders.filter(l => l && l.loader && l.loader.match(match));
return found ? found[0] : null;
};
// existing css loader
const cssloader =
findLoader(config.module.loaders, matchCssLoaders);
const newloader = Object.assign({}, cssloader, {
test: /\.module\.css$/,
include: [src],
loader: cssloader.loader.replace(matchCssLoaders, `$1$2?modules&localIdentName=${cssModulesNames}$3`)
});
config.module.loaders.push(newloader);
cssloader.test = new RegExp(`[^module]${cssloader.test.source}`);
cssloader.loader = newloader.loader;
config.module.loaders.push({
test: /\.css$/,
include: [modules],
loader: 'style!css'
});
// CSS modules
// postcss
config.postcss = [].concat([
require('precss')({}),
require('autoprefixer')({}),
require('cssnano')({})
]);
// END postcss
// Roots
config.resolve.root = [src, modules];
config.resolve.alias = {
css: join(src, 'styles'),
containers: join(src, 'containers'),
components: join(src, 'components'),
utils: join(src, 'utils'),
styles: join(src, 'styles')
};
// end Roots
// Dev
if (isDev) {
config.devServer.port = devPort;
config.devServer.hostname = devHost;
}
// Testing
if (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 (.*)\((.*\))/);
const idx = [
'DedupePlugin',
'UglifyJsPlugin'
].indexOf(fnName[1]);
return idx < 0;
});
}
// End Testing
module.exports = config;
我对 React.JS 和全栈开发非常陌生,所以任何帮助将不胜感激。
最佳答案
@Tyler Sebastian 提供的答案将不起作用,因为 const cssloader = findLoader(...);
用于根据您正在使用的教程查找现有的 cssloader,而新的正在推送的 loader 是用来替换它的。
根据教程的评论,该错误似乎是教程中使用的技术已更新,导致其损坏。评论者建议的解决方案是删除 node_modules 目录,将 webpack.config.js 文件替换为教程存储库中提供的文件,然后重新安装依赖项(本质上恢复到旧版本的技术)。
我认为这不是一个好方法,因为目的是学习一些有用的东西,不仅仅是让它发挥作用,而且它应该发挥作用。由于我是一个同样缺乏经验的 React 开发人员,试图使用这个过时的教程,所以我无法想出更好的解决方案
编辑:我已经尝试了评论建议的解决方案,但它不起作用。
关于reactjs - React.JS : TypeError: Cannot read property 'filter' of undefined at findLoader,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44079557/
我应该在 Angular 应用程序中使用哪个,为什么? array.filter(o => o.name === myName); 或 $filter('filter')(array, {name:
以下两个调用是否解析为 Django 中的等效 SQL 查询? 链接多个调用 Model.objects \ .filter(arg1=foo) \ .filter(arg2=bar) \ ... 将
我正在尝试在 hbase-1.0.0 上运行 completebulkload。但是遇到错误, "java.lang.NoClassDefFoundError: org/apache/hadoop/h
我从这篇文章中学习了“树”和“索引”:Learning Git Internals by Example 但是当谈到“git filter-branch”命令时,我不知道“--tree-filter”
我正在尝试构建我的自定义过滤器以进行身份验证,但是当我尝试运行我的 WebAPI 解决方案时遇到了这个问题: The given filter instance must implement on
我想保留一个过滤器函数的列表,并通过返回true的过滤器来标记这些项。这是接近但不完全。。主要问题是std::stringify!总是返回“ADF”,可能是我声明为ADF的变量名。。第二个问题是,在定
我想保留一个筛选器函数列表,并通过返回True的筛选器来标记这些项目。这已经很接近了,但还不完全是。。主要问题是std::stringify!总是返回“ADF”,可能是我声明为ADF的变量名。。第二个
我尝试在 graphql 查询中使用 where: filter 但不幸的是我遇到了一些错误。我做错了什么? shoeposts { data { attributes(where: {s
几周以来,我一直在使用 Zend Framework 2,尽管在线文档非常不完整,但我还是设法建立了我的网站的初稿。 不幸的是,我在尝试实现 Zend\Filter\File\Rename 过滤器的自
我正在尝试在 APC 中使用 apc.filter 等功能。但是我所做的一切都不起作用 我应该完成 2 项任务。 1)需要包含1个目录用于缓存。我的代码在apc.ini apc.cache by de
我想使用一个可能返回 Err 的过滤器函数结果,并将其冒泡到包含函数: mycoll.into_iter() .filter(|el| { if el == "bad" { E
每个 Controller 都应该有方法filters(),在那里你可以指定一些类,我想知道,这些类是如何被框架包含的?这些类是如何配置的,以及何时配置,也许有人可以给我一个使用filters()并包
我想在一维信号上使用巴特沃斯滤波器。在 Matlab 中,脚本如下所示: f=100; f_cutoff = 20; fnorm =f_cutoff/(f/2); [b,a] = butter
我想比较两个列表,以便找到第一个列表中不在第二个列表中的值并返回它们。提前谢谢大家代码返回:不再支持过滤器有没有其他方法可以做到这一点 MATCH (cu:Customer{name: "myCust
在 Android 应用程序中,我有一个通用设置 -- 一个带有 ArrayAdapter 的 ListView。在某一时刻,我调用了适配器的 getFilter().filter() 方法,它很好地
所以我有如下数据: [ { "id": 0, "title": "happy dayys", "owner": {"id": "1", "username
阅读Mastering Web Development with AngularJS ,我正在尝试创建并使用一个使用 $filter 模块/关键字的新过滤器。 HTML
所以我的理解是 halt 命令应该停止当前过滤器中的请求,但它似乎继续。下面是一个非常简单的 Sinatra 应用程序,演示了这一点。 服务器.rb require 'sinatra' before
我正在尝试将散列传递给 URL 以设置 UIkit 过滤器。 All
我正在使用 django-filter应用程序。但是有一个问题我不知道如何解决。它几乎与 django 文档中描述的完全相同: https://docs.djangoproject.com/en/1.
我是一名优秀的程序员,十分优秀!