@ babel / preset-реакции установлена, но все еще выдает ошибку разбора - PullRequest
Новая
       8

@ babel / preset-реакции установлена, но все еще выдает ошибку разбора

0 голосов
/ 20 марта 2020

Я пытаюсь создать приложение React с Express (с нуля, не используя приложение create-реагировать на приложения, а собирая воедино различные учебные пособия). Тем не менее, у меня проблемы с получением Babel для транспорта JSX. Я получаю ожидаемую ошибку токена (<). </p>

Я не уверен, что делаю неправильно. Точная ошибка, которую я получаю: 

<path>\test\src\index.js
  5:3  error  Parsing error: Unexpected token <

index. js

import React from "react";
import { render } from "react-dom";

const App = () => (
  <div>
    <h1>Hello test</h1>
  </div>
);

render(<App />, document.getElementById("app"));

.babelr c

{   
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env" 
  ] 
}

webpack.config 

import path from 'path';
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import WebpackMd5Hash from 'webpack-md5-hash';

export default {
  mode: "development",
  target: "web",
  devtool: 'source-map',
  entry: {
    main: path.resolve(__dirname, 'src/index')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].[chunkhash].js'
  },
  plugins: [

    // Hash the files using MD5 so that their names change when the content changes.
    new WebpackMd5Hash(),

    // Create HTML file that includes reference to bundled JS.
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
      inject: true,
      // Properties you define here are available in index.html
      // using htmlWebpackPlugin.options.varName
      trackJSToken: '43ad216f57d94259968435894490a5c7'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader", "eslint-loader"]
      },
      {
        test: /(\.css)$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};

упаковка. json

{
  "name": "javascript-development-environment",
  "version": "1.0.0",
  "description": "JavaScript development environment Pluralsight course by Cory House",
  "scripts": {
    "start": "NODE_ENV=development npm-run-all --parallel open:src",
    "open:src": "babel-node bin/www",
    "clean-dist": "rimraf ./dist && mkdir dist",
    "lint": "eslint src",
    "prebuild": "npm-run-all clean-dist lint",
    "build": "babel-node buildScripts/build.js",
    "postbuild": "babel-node buildScripts/distServer.js",
    "deploy": "surge ./dist"
  },
  "dependencies": {
    "bootstrap": "4.3.1",
    "express": "^4.17.1",
    "immer": "2.1.3",
    "prop-types": "15.7.2",
    "react": "16.8.4",
    "react-dom": "16.8.4",
    "react-redux": "6.0.1",
    "react-router-dom": "5.0.0",
    "react-toastify": "4.5.2",
    "redux": "4.0.1",
    "redux-thunk": "2.3.0",
    "reselect": "4.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.7",
    "@babel/node": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "@babel/register": "^7.8.6",
    "babel-loader": "^8.0.6",
    "chalk": "1.1.3",
    "compression": "^1.7.4",
    "cross-env": "^7.0.2",
    "css-loader": "2.1.1",
    "enzyme": "3.9.0",
    "enzyme-adapter-react-16": "1.11.2",
    "eslint": "5.15.2",
    "eslint-loader": "2.1.2",
    "eslint-plugin-import": "2.16.0",
    "html-webpack-plugin": "3.2.0",
    "jest": "24.5.0",
    "node-fetch": "^2.3.0",
    "npm-run-all": "4.1.5",
    "open": "^7.0.3",
    "react-test-renderer": "16.8.4",
    "react-testing-library": "6.0.0",
    "redux-mock-store": "1.5.3",
    "rimraf": "2.6.3",
    "style-loader": "0.23.1",
    "surge": "^0.21.3",
    "webpack": "4.29.6",
    "webpack-bundle-analyzer": "3.1.0",
    "webpack-cli": "3.3.0",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-md5-hash": "0.0.6"
  }
}
...