｢Wdm｣: не удалось скомпилировать - нужен соответствующий загрузчик для обработки этого типа файлов

Question

У меня есть приложение, которое сортирует таблицы данных с использованием React / JSON.Я слежу за этим на YouTube.Вот ссылка .У меня было без проблем с моей установкой npm (шокирует, я знаю).

Когда я запускаю npm start;Тем не менее, есть только одна небольшая проблема, и я не могу понять ее после просмотра нескольких результатов поиска, включая и выключая StackOverflow.

ERROR in ./src/components/employee-table/index.jsx
Module parse failed: Unexpected token (5:4)
You may need an appropriate loader to handle this file type.
| export default function EmployeeTable(props) {
|   return (
|     <table>
|       <thead>
|         <tr>
i ｢wdm｣: Failed to compile.

Хорошо.Поэтому IntelliJ говорит мне, что мне может понадобиться соответствующий загрузчик для обработки этого типа файлов.Вот фрагмент моего файла webpack-config.js, который имеет отношение к этому вопросу:

'use strict';

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const commonConfig = (nodeEnv) => {
  return {

    resolve: {
      modules: [path.resolve('./src'), 'node_modules'],
      extensions: ['.js', '.csv', '.json', '.scss', '.css', '.html', 'jsx']
    },

    module: {
      rules: [
        {
          test: /\.js(x)$/,
          exclude: /node_modules/,
          enforce: 'pre',
          use: [{loader: 'eslint-loader', options: {configFile: '.eslintrc'}}]
        },
        {
          test: /\.html$/,
          use: [{loader: 'htmlhint-loader', options: {configFile: '.htmlhintrc'}}],
          exclude: /node_modules/,
          enforce: 'pre'
        },
        {
          use: 'babel-loader',
          test: /\.js$/,
          exclude: /node_modules/
        },
        {
          test: /\.(png|jpg|jpeg|svg|gif|woff|woff2|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
          use: 'file-loader'
        },
        {
          test: /\.html$/,
          use: 'html-loader'
        }
      ]
    },

Вот код моей страницы index.jsx:

import React from 'react';
export default function EmployeeTable(props) {
    return (
    <table>
    <thead>
    <tr>
    <th>id</th>
    <th>name</th>
    <th>manager</th>
    <th>email</th>
    </tr>
    </thead>
    <tbody>
    {
        props.data.map(row => (
        <tr>
        <td>{row.rank}</td>
        </tr>
        ))
    }
    </tbody>
    </table>
    );
}

И, наконец, мои сотрудники.файл json:

[
  {
    "id": "123456",
    "name": "Naruto",
    "manager": "Jiraiya",
    "email": "example@stack.com"
  }
]

Я четко определил свои расширения и тестовые части в файле веб-пакета.Может я что-то упустил?Я новичок в React (самообучение).Я только что закончил учебный курс по Java.Пожалуйста, будьте нежны ... :)