版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m_review/article/details/89707572
使用 webpack 从零搭建 react项目的git地址:https://github.com/YueJingGe/webpack-react/tree/master
webpack+react+router+redux项目配置中遇到的问题
解决 eslintrc import 报错
问题:Parsing error: The keyword 'import' is reserved
方案:.eslintrc
文件中配置 "parser": "babel-eslint"
解决 eslintrc html 报错
解决方案:
第一步: npm install --save-dev eslint-plugin-html
第二步: .eslintrc
文件中配置 "plugins": ["html"]
jsx语法报错
index.js 文件
import React from "react";
import ReactDom from "react-dom";
ReactDom.render(<div>hello,react</div>, document.getElementById("root"));
报错信息:
[WDS] Errors while compiling. Reload prevented.
Module parse failed: Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
|
| ReactDom.render(
> <div>hello,react</div>,
| document.getElementById("root")
| );
原因:无法支持 jsx 语法,您可能需要适当的加载程序来处理此文件类型。
解决:
第一步:安装加载程序
npm install -D @babel/core babel-loader @babel/preset-env @babel/preset-react
第二步:在 webpack 中配置
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-react", "@babel/preset-env"]
}
}
}
];
}
Uncaught Invariant Violation: Target container is not a DOM element.
解决:在 webpack 中配置
plugins: [
new HtmlWebpackPlugin({
title: "从零搭建webpack-react",
template: "src/assets/index.html" // webpack需要模板的路径
})
];
browserHistory 刷新页面 404
报错:Cannot GET /todo
解决:webpack 中配置historyApiFallback: true
devServer: {
historyApiFallback: true;
}
import 编译 less 失败报错
报错信息:
ERROR in ./src/components/Todo/index.less 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .todo-container{
| width: 100%;
| }
@ ./src/components/Todo/index.js 20:0-22
@ ./src/App.js
@ ./src/index.js
解决:
module: {
rules: [
{
test: /\.(css|less)$/,
use: ["style-loader", "css-loader", "less-loader"]
}
];
}
报错‘less’找不到
报错信息:
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
Error: Cannot find module 'less'
原因: less-loader
对 less
有依赖
解决:安装 less
报错 syntax ‘classProperties’ isn’t currently enabled
解决:安装插件:
npm install --save-dev @babel/plugin-proposal-class-properties
此插件转换静态类属性以及使用属性初始化程序语法声明的属性。
.babelrc 文件中配置:
{
"plugins": ["@babel/plugin-proposal-class-properties"]
}
使用es6类属性时,eslint报Parsing error: Unexpected token =
报错场景:
onPressEnter = e => {
console.log(e.target.value);
};
解决:
第一步: npm install eslint babel-eslint --save-dev
第二步:.eslintrc文件中配置 "parser": "babel-eslint"