web-dev-qa-db-fra.com

Échec de la construction du module ReactJS: SyntaxError: jeton inattendu - ReactDOM.render

Pourquoi ai-je cette erreur ci-dessous? Mon instruction ReactDOM.render(<App />, container); est un code 100% légitime.

Mon dépôt github: https://github.com/leongaban/react_starwars

enter image description here

Le fichier app.js

import react from 'react'
import ReactDom from 'react-dom'
import App from 'components/App'

require('index.html');

// Create app
const container = document.getElementById('app-container');

// Render app
ReactDOM.render(<App />, container);

Le fichier composants/appli

import React from 'react'

const App = () =>
  <div className='container'>
    <div className='row'>

    </div>
    <div className='row'>

    </div>
  </div>;

export default App;

Mon webpack.config

const webpack = require('webpack');
const path = require('path');

module.exports = {
entry: [
  './src/app.js'
],
output: {
  path: path.resolve(__dirname, './build'),
  filename: 'app.bundle.js',
},
module: {
  loaders: [
    {
      test: /\.html$/,
      loader: 'file-loader?name=[name].[ext]',
    },
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
    },
  ],
},
plugins: [
  new webpack.NamedModulesPlugin(),
]
};
javascriptreactjsreact-dom
17
Leon Gaban

Utilisez-le comme fichier de configuration de votre webpack

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: [
        './src/app.js'
    ],
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [
            {
                test: /\.html$/,
                loader: 'file-loader?name=[name].[ext]',
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        },
    ],
},
plugins: [
    new webpack.NamedModulesPlugin(),
]
};

Vous manquez les préréglages

14
Julien

J'obtenais la même erreur et j'avais simplement besoin d'ajouter un fichier .babelrc à l'itinéraire du projet (même emplacement que package.json) contenant les éléments suivants:

{
    "presets": [
        "env", 
        "react"
    ],
    "plugins": [
        "transform-class-properties"
    ]
}
12
Andy Smith

Installez babel-preset-react pour la syntaxe jsx.

npm install babel-preset-react

préréglages

loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015']
            }
        }
    ]
5
Sridhar

Ou vous pouvez mettre vos presets dans un fichier .babelrc à la racine de votre projet. Bien sûr, vous devez d'abord l'installer.

Comme ça /path/to/your/project/.babelrc

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

1
Yury Lavrukhin

Essayez d'ajouter la propriété resolve à votre fichier de configuration de webpack:

    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ["babel-loader"]
            }
        ]
    }
1
Daniel Pérez

Si quelqu'un travaille avec l'ARC et obtient cette erreur. Ici, la solution va.

Aller à package.json et ajoutez babel config. Si je ne semble pas si généreux, voici le code

 "babel": {
        "presets": [
            "react-app"
        ]
 }

Gardez le reste de la configuration de l'ARC tel quel. En fait, l'ARC utilise son propre préréglage personnalisé react-app et c'est ce qui est configuré dans webpack.config.js fichier. Par conséquent, pas besoin d'autres préréglages.

0
kushalvm