responsejs + webpack + Babel, как определить, какой плагин или загрузчик использовать из сообщения об ошибке - PullRequest
Новая
       12

responsejs + webpack + Babel, как определить, какой плагин или загрузчик использовать из сообщения об ошибке

0 голосов
/ 26 ноября 2018

Я новичок в webpack и babel, и пытаюсь настроить сборку dev для проекта.когда я запускаю сборку dev, я получаю сообщение об ошибке ниже, и я не уверен, какой плагин 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?любые указатели были бы полезны.

Спасибо

1 Ответ

0 голосов
/ 26 ноября 2018

В вашем webpack.config.js ваш загрузчик Babel не ищет файлы JSX.Вам нужно изменить 

test: /\.js$/,

на 

test: /.jsx?$/,

'?'означает, что «x» является необязательным, то есть он просматривает файлы .js и .jsx.

...