Prise en charge de la syntaxe expérimentale 'JSX' n'est pas activée actuellement

J'essaie de courir un code très simple, mais je reçois une erreur, je n'ai pas utilisé l'application Create Reag!

Cela ressemble à mon fichier babel.config.js est ignoré!

C'est la structure de mon petit projet : -

Mon fichier html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReactJS</title>
</head>

<body>
    <div id="app"></div>
    <script  src = 'bundle.js' ></script>
</body> 

</html>

Mon fichier index.js:

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

render(<h1>Hello World!!</h1>, document.getElementById('app'));

Mon paquet JSON:

{
  "name": "front",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack-dev-server --mode production"
  },
  "dependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.10.5",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.9.0",
    "babel-loader": "^8.1.0",
    "webpack-dev-server": "^3.10.3"
  }
}

Mon webpack.config.js

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'src', 'index.js'),
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'public'),
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
            }
        }]
    },
};

Et c'est mon babel.config.js

module.exports = {
    "presets": ["@babel/preset-env", "@babel/preset-react"]

};

Erreur quand

yarn webpack-dev-server --mode development

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /root/treina/front/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (4:8):

  2 | import { render } from 'react-dom';
  3 | 
> 4 | render(<h1>Hello World!!</h1>, document.getElementById('app'));
    |        ^

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.
    at Parser._raise (/root/treina/front/node_modules/@babel/parser/lib/index.js:757:17)
    at Parser.raiseWithData (/root/treina/front/node_modules/@babel/parser/lib/index.js:750:17)
    at Parser.expectOnePlugin (/root/treina/front/node_modules/@babel/parser/lib/index.js:8849:18)
    at Parser.parseExprAtom (/root/treina/front/node_modules/@babel/parser/lib/index.js:10170:22)
    at Parser.parseExprSubscripts (/root/treina/front/node_modules/@babel/parser/lib/index.js:9688:23)
    at Parser.parseMaybeUnary (/root/treina/front/node_modules/@babel/parser/lib/index.js:9668:21)
    at Parser.parseExprOps (/root/treina/front/node_modules/@babel/parser/lib/index.js:9538:23)
    at Parser.parseMaybeConditional (/root/treina/front/node_modules/@babel/parser/lib/index.js:9511:23)
    at Parser.parseMaybeAssign (/root/treina/front/node_modules/@babel/parser/lib/index.js:9466:21)
    at Parser.parseExprListItem (/root/treina/front/node_modules/@babel/parser/lib/index.js:10846:18)
ℹ ｢wdm｣: Failed to compile.

J'utilise le fil et le terminal WSL

javascripthtmlreactjsyarnpkg

20 juil. 2020Manzini

Mmm je pense que le problème est dans votre babel, essayez ceci:

nPM I -Save-dev @ Babel/Plugin-Proposition-Class-PROPRIÉTÉS
ajouter lâche: vrai dans votre babelrc

20 juil. 2020Ryan Tillaman