reactjs+webpack+Babel如何从错误消息中确定使用哪个插件或加载程序

Question

我是webpack和babel的新手，正在尝试为项目设置开发构建。当我运行开发构建时，我收到下面的错误消息，我不确定该使用哪个babel插件来修复这个构建错误。

ERROR in ./src/App/App.jsx 24:4
Module parse failed: Unexpected token (24:4)
You may need an appropriate loader to handle this file type.
|
| const switchRoutes = (
>     <Switch>
|         {otherRoutes.map((prop, key) => {
|             if (prop.redirect)
@ ./src/index.js 7:0-28 21:75-78

/src/App/App.jsx代码如下所示：

import React, { Component } from 'react';
import { Switch, Route, Redirect, matchPath } from "react-router-dom";
import 'babel-polyfill';
// Redux
import { connect } from 'react-redux';
import { updateUser } from '../_actions/userActions';
// Cookies
import { withCookies } from 'react-cookie';
import './App.css';
// Components
import Title from '../TitleBar/Title';
//Routes
import otherRoutes from '../_routes/otherRoutes';
import LoginContainer from '../LoginPage/LoginContainer';
import PrivateRoute from '../_routes/PrivateRoute';
const switchRoutes = (
<Switch>
{otherRoutes.map((prop, key) => {
if (prop.redirect)
return <Redirect from={prop.path} to={prop.to} key={key} />;
return <PrivateRoute exact path={prop.path} component={prop.component} key={key} />;
})}
</Switch>
);

这是我的package.json文件

{
"name": "goal-setter",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "webpack-dev-server --mode development",
"dev": "webpack --mode development --progress",
"build": "webpack --mode production --progress"
},
"dependencies": {
"@devexpress/dx-react-core": "^1.8.0",
"@devexpress/dx-react-grid": "^1.8.0",
"@devexpress/dx-react-grid-material-ui": "^1.8.0",
"@material-ui/core": "^3.1.1",
"@material-ui/icons": "^3.0.1",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"react": "^16.5.2",
"react-cookie": "^3.0.4",
"react-dom": "^16.5.2",
"react-json-view": "^1.19.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-table": "^6.8.6",
"react-tabs": "^2.3.0",
"react-web-tabs": "^1.0.1",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-transform-react-constant-elements": "^7.0.0",
"@babel/plugin-transform-react-inline-elements": "^7.0.0",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^4.0.0-beta.4",
"style-loader": "^0.23.1",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}

下面是我的webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer: {
port: 1234,
},
resolve: {
extensions: ['.js', '.jsx'],
},
devtool: 'cheap-module-source-map',
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
}

这是我的.babelrc文件

{
"presets": [
"@babel/env", "@babel/react"
],
"plugins": [
"@babel/proposal-class-properties"
]
}

如果有任何帮助，我们将不胜感激？此外，我想知道如何根据babel错误确定要使用哪个加载程序？任何指针都会有帮助。

感谢

Answer 1

在webpack.config.js中，babel加载程序不查找JSX文件。您需要更改

test: /.js$/,

至

test: /.jsx?$/,

"？"意味着"x"是可选的，这意味着它同时查看.js和.jsx文件。