Question

我有一个使用React / JSON对数据表进行排序的应用程序。我正在关注React University的Youtube教程。这是link。我的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>
    );
}

最后是我的employee.json文件：

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

我已经在Webpack文件中明确定义了扩展名和测试部分。也许我缺少什么？我是React（自学）的新手。我刚刚完成了Java新手训练营课程。请温柔... :)

｢wdm｣：编译失败-需要适当的加载程序来处理此文件类型

0 个答案: