wake-up-neo.com

Reagieren Sie, Babel, Webpack, der jsx-Code nicht analysiert

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
);

Ich habe genau die gleichen Fragen gesehen, als ich herumgesucht habe, aber keine der Antworten schien für mich zutreffend zu sein. Beim Ausführen von webpack wird die folgende Fehlermeldung angezeigt:

FEHLER in ./app.js
Modulerstellung fehlgeschlagen: SyntaxError: Pfad/zu/project/react-webpack-project/app/app.js: Unerwartetes Token (5: 2) 

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

Ich bin nicht sicher, warum ich diesen Fehler immer noch bekomme. Ich vermute, es hat etwas mit meiner webpack.config.js-Datei zu tun, aber nicht 100% was das Problem ist.

16
httpNick

Zunächst einmal: Wenn Sie React v ^ 0.14 verwenden, sollten Sie Ihren Code mit React-Dom rendern. https://www.npmjs.com/package/react-dom

Zweitens sollte dies Ihr Problem lösen: babel-loader jsx SyntaxError: Unerwartetes Token

8
dandel

Sie müssen Voreinstellungen zu Ihrem Babel-Loader hinzufügen:

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

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

9
Abhinav Singi

Ich verwende derzeit React 0.14.3. Die ReactDOM-Lösung funktionierte nicht und das Hinzufügen der Babel-Presets in die Datei webpack.config.js war nicht möglich. Grundsätzlich scheinen diese Lösungen nur zu funktionieren, wenn Sie einen einzelnen Loader definiert haben, aber ich hatte sowohl den Babel-Loader als auch den Reakt-Hot-Loader.

Was DID funktionierte, war die Installation des Moduls für die Babel-Reaktionsvoreinstellungen:

npm install babel-preset-react

erstellen Sie dann eine .babelrc-Datei in meinem Projektverzeichnis mit folgendem Befehl:

{
  "presets": ['react']
}

Dies ist dokumentiert unter http://babeljs.io/docs/plugins/preset-react/ , wie von Abhinav Singi gezeigt.

5
JESii

Für mich bestand die Antwort darin, die Voreinstellungen in den Abfrageblock aufzunehmen:

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

dies hilft mir, dieses Problem zu lösen.

erstellen Sie die neue Datei .babelrc im selben Verzeichnis webpack.config.js. Fügen Sie dies zu .babelrc hinzu

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