babel-preset-env 无法识别 jsx答案

【问题标题】：babel-preset-env not recognizing jsxbabel-preset-env 无法识别 jsx
【发布时间】：2018-03-18 17:42:11
【问题描述】：

我第一次尝试进行 webpack 构建，并且相对于文档，我已经检查了我的 babel 配置很多次，但我终其一生都看不出哪里错了。尽管如此，我在构建一个非常简单的应用程序时遇到了错误（几乎是默认应用程序，连接了 redux）：

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (10:2)
   8 | 
   9 | ReactDOM.render(
> 10 |   <Provider store={store}>
     |   ^
  11 |     <App />
  12 |   </Provider>, global.document.getElementById('root'));
  13 | registerServiceWorker();

这是我的webpack.config.js：

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  plugins: [
    new UglifyJSPlugin()
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: [
          'babel-loader'
        ]
      }
    ]
  }
};

我还使用了 webpack 文档建议的变体：

{
  test: /\.js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['env']
    }
  }
}

还有我的package.json：

{
  "name": "interactor",
  "version": "0.1.0",
  "private": true,
  "babel": {
    "presets": [
      ["env", {
        "targets": {
          "browsers": ["last 2 versions"]
        }
      }]
    ]
  },
  "dependencies": {
    "react": "^16.0.0",
    "react-bootstrap": "^0.31.3",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-scripts": "1.0.14",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "start": "webpack --config webpack.config.js",
    "build": "webpack",
    "test": "react-scripts test --env=jsdom"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "css-loader": "^0.28.7",
    "eslint": "^4.8.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.4.0",
    "file-loader": "^1.1.5",
    "style-loader": "^0.19.0",
    "uglifyjs-webpack-plugin": "^0.4.6",
    "webpack": "^3.6.0"
  }
}

我猜 index.js 也可能有用：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, global.document.getElementById('root'));
registerServiceWorker();

我在这里做错了什么？

【问题讨论】：

标签： reactjs webpack

【解决方案1】：

像往常一样，用户错误，但也许它会帮助像我这样的另一个新手。只是永远不要将“反应”放入我的 babel 预设中。它应该看起来像

"babel": {
    "presets": [
      "react",
      ["env", {
        "targets": {
          "browsers": ["last 2 versions"]
        }
      }]
    ]
  }

哦，请确保您确实安装了 babel-preset-react。

【讨论】：