React Babel не может разобрать функции Arrow, вместо приложения отображается каталог - PullRequest
Новая
       8

React Babel не может разобрать функции Arrow, вместо приложения отображается каталог

0 голосов
/ 05 февраля 2020

Я так запутался, почему это не работает. Я добавил babel-loader и все плагины. Но я продолжаю получать эту ошибку: 

ERROR in ./src/index.js 5:9
Module parse failed: Unexpected token (5:9)
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
| 
| const App = () => {
>   return <div> <h1>Hi!</h1></div>;
| };
| 
ℹ ｢wdm｣: Failed to compile.

мои пакеты: 

  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-transform-arrow-functions": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.3"
  }

index. js: 

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

const App = () => {
  return <div> <h1>Hi!</h1></div>;
};


render(< App />, document.getDocumentById('root'));

.babelr c: 

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-arrow-functions", "@babel/plugin-proposal-class-properties"]
}

webpack.config. js: 

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

1 Ответ

0 голосов
/ 06 февраля 2020

Определенно, пакет не может видеть ваши предустановки, поэтому вы можете поместить предустановки в файл конфигурации Webpack, как показано ниже: 

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: { // ↓↓↓ here is the preset configs
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

Или вы можете добавить его в файл package.json, точно как показано ниже: 

"dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
"devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-transform-arrow-functions": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.3"
  },
"presets": ["@babel/preset-env", "@babel/preset-react"]

Надеюсь, этот пост поможет вам. Если первая часть неверна, скажите, пожалуйста, пропустить ее.

...