web-dev-qa-db-fra.com

Réagissez, babel, le webpack n'analyse pas le code jsx

webpack.config.js

module.exports = {
  context: __dirname + "/app",
  entry: {
    javascript: "./app.js",
    html: "./index.html",
  },
  resolve: {
   extensions: ['', '.js', '.jsx']
 },
  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
    ],
  },
}

package.json

{
  "name": "react-webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.0.15",
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "file-loader": "^0.8.4",
    "webpack": "^1.12.2"
  },
  "dependencies": {
    "react": "^0.14.2"
  }
}

app/app.js

import React from "react";
import Greeting from "./greeting";

React.render(
  <Greeting name="World"/>,
  document.body
);

J'ai vu exactement les mêmes questions après avoir cherché partout, mais aucune des réponses ne semblait s'appliquer à moi. Je reçois le message d'erreur suivant lors de l'exécution de webpack:

ERREUR dans ./app.js
La construction du module a échoué: SyntaxError: chemin/vers/projet/react-webpack-projet/app/app.js: Jeton inattendu (5: 2) 

React.render(
  <Greeting name="World"/>,
  document.body
);

Je ne sais pas pourquoi je reçois encore cette erreur. Je suppose que cela a quelque chose à voir avec mon fichier webpack.config.js, mais pas à 100% quel est le problème.

javascriptnode.jsreactjswebpackbabeljs
16
httpNick

Tout d'abord: si vous utilisez React v ^ 0.14, vous devez restituer votre code avec React-Dom. https://www.npmjs.com/package/react-dom

Deuxièmement, cela devrait résoudre votre problème: babel-loader jsx SyntaxError: Jeton inattendu

8
dandel

Vous devez ajouter des préréglages à votre babel-loader:

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

http://babeljs.io/docs/plugins/#presets

9
Abhinav Singi

J'utilise actuellement React 0.14.3. La solution ReactDOM ne fonctionnait pas, pas plus que l'ajout des préréglages babel dans le fichier webpack.config.js. Fondamentalement, ces solutions ne semblent fonctionner que si vous avez défini un seul chargeur, mais j'avais à la fois le chargeur babel et le chargeur réactif.

Le travail de DID a consisté à installer le module des préréglages babel react:

npm install babel-preset-react

puis créez un fichier .babelrc dans le répertoire de mon projet avec les éléments suivants:

{
  "presets": ['react']
}

Ceci est documenté à http://babeljs.io/docs/plugins/preset-react/ , comme indiqué par Abhinav Singi

5
JESii

Pour moi, la réponse était d'inclure les préréglages dans le bloc de requête:

query: {
  presets: ['react', 'es2015']
}
1
JoeTidee

c'est m'aider à résoudre ce problème.

créer un nouveau fichier .babelrc dans le même répertoire webpack.config.js. Ajoutez ceci à .babelrc

  {
  "stage": 2,
  "env": {
    "development": {
      "plugins": [
        "react-display-name",
        "react-transform"
      ],
      "extra": {
        "react-transform": {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals":  ["module"]
          }]
        }
      }
    }
  }
}
0
yussan