javascript - SyntaxError : react-table/src/publicUtils. js:当前未启用对实验语法 'jsx' 的支持

Question

使用 webpack 构建时遇到问题。这是我在构建时看到的错误...

ERROR in ./node_modules/react-table/src/publicUtils.js 10:35
Module parse failed: Unexpected token (10:35)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export const defaultRenderer = ({ value = '' }) => value;
> export const emptyRenderer = () => <>&nbsp;</>;
| 
| export const defaultColumn = {
 @ ./node_modules/react-table/src/plugin-hooks/useRowSelect.js 3:0-9:23 14:0-25 15:0-29 16:0-25 17:0-33 96:22-34 103:22-47 110:22-51 141:22-47 178:22-55 235:2-19 277:35-47 279:2-24 281:23-48 286:30-59 291:30-63 296:36-61 300:22-34 302:40-54 307:44-58 327:34-48
 @ ./src/pages/CustomTableContainer.jsx 34:20-72
 @ ./src/pages/TimeReport.jsx 18:51-88
 @ ./src/pages/MainNavigation.jsx 22:41-64
 @ ./src/App.js 18:45-78
 @ ./src/index.js 11:34-50

在我添加 webpack 和 babel 之前，虽然我遇到了同样的问题(基本上问题是促使我首先开始添加 webpack 和 babel)......在这种情况下的错误如下:

./node_modules/react-table/src/publicUtils.js
SyntaxError: /Users/badu/Workspaces/4D-Projects/time-report/node_modules/react-table/src/publicUtils.js: Support for the experimental syntax 'jsx' isn't currently enabled (10:36):

   8 |
   9 | export const defaultRenderer = ({ value = '' }) => value;
> 10 | export const emptyRenderer = () => <>&nbsp;</>;
     |                                    ^
  11 |
  12 | export const defaultColumn = {
  13 |   Cell: defaultRenderer,

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

无论如何，我目前正在使用 React 通过 babel 和 webpack 构建我的应用程序。这是我的 .babelrc 文件

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties"
  ],
  "env": {
    "production": {
      "only": ["src"],
      "plugins": [
        [
          "transform-react-remove-prop-types",
          {
            "removeImport": true
          }
        ],
        "@babel/plugin-transform-react-inline-elements",
        "@babel/plugin-transform-react-constant-elements"
      ]
    }
  }
}

这是我的 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management',
        }),
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    mode: 'development',
    devServer: {
        contentBase: './dist',
        open: true
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react'],
                        include: [
                            path.resolve('node_modules/react-table/'),
                        ],
                        exclude: /node_modules\/(?!react-table).+/
                    }
                }
            },
            ... other loaders
        ]
    },
    resolve: {
        extensions: [".js", ".jsx"],
        modules: [
            'node_modules'
        ]
    }
};

我遵循了很多指南，但仍然找不到任何可以解决我的问题的东西。
publicUtils.js 来自外部模块。但是这个模块里面有 dist 文件夹，里面应该有已经编译的代码(？)
我还不是 webpack 和 babel 方面的专家，所以我可能会遗漏一些东西

Answer 1

不知道是生气还是什么，但是检查导入，Visual Studio 自动导入了我

import {useRowSelect} from "react-table/src/plugin-hooks/useRowSelect";

而正确的导入(工作)是

import {useRowSelect} from "react-table";

错误从未出现在 webpack 或 babel 方面
希望这可以为其他人节省大量时间