Reagieren, babel, webpack nicht analysieren jsx-code

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]",
      },
    ],
  },
}

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

Habe ich gesehen, die genau dieselben Fragen nach der Suche rund um, aber keine der Antworten schien auf mich zu. Ich erhalte die folgende Fehlermeldung beim ausführen webpack :

FEHLER bei ./app.js

Modul bauen Fehler: SyntaxError: path/to/project/react-webpack-project/app/app.js: Unerwartetes token (5:2)

JS:

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

Ich bin nicht sicher, warum bin ich immer diese Fehlermeldung immer noch. Ich vermute, es hat etwas zu tun mit meinem webpack.config.js Datei, aber nicht 100% was das problem ist.

  • Haben Sie versucht, diese Lösung ? link
  • Ich denke, das problem ist, dass Sie mehrere Lader definiert; Kasse unten meine Antwort-ich denke, dass die Verwendung eines .babelrc Datei wird den trick tun!
InformationsquelleAutor httpNick | 2015-11-03
  1. 8

    Erstens: wenn Sie Reagieren, v^0.14, Sie sollte machen Ihren code mit Reagieren-Dom. https://www.npmjs.com/package/react-dom

    Zweiten, dies sollte Ihr problem beheben:
    babel-loader jsx SyntaxError: Unexpected token

    • Ich war nach einer pluralsight Lernprogramm wurde mit dieser Methode der Verpackung. Ich werde versuchen zu Folgen zusammen mit dieser neuen Art der Verpackung wie es aussieht. Ich konnte es nicht zu funktionieren, auch nach den Anweisungen in den 2. link.
    • Schade :(. Lassen Sie uns etwas versuchen: versuchen Sie, ein Babel-version niedriger als 6.0.0
    • der zweite link hat mir nicht helfen, entweder. Gibt es eine komplette webpack/jsx/reagieren Hallo Welt überall?
    InformationsquelleAutor dandel
  2. 9

    Müssen Sie die Voreinstellungen hinzufügen, um Ihre babel-loader:

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

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

    InformationsquelleAutor Abhinav Singi
  3. 5

    Ich bin derzeit mit Reagieren 0.14.3. Die ReactDOM Lösung hat nicht funktioniert, noch hat das hinzufügen der babel-Vorgaben in der webpack.config.js. Im Grunde sind diese Lösungen funktionieren scheinbar nur wenn Sie eine single-loader definiert, aber ich hatte das babel-loader sowie das reagieren-hot-loader.

    Was funktioniert HAT war die Installation des babel reagieren presets Modul:

    npm install babel-preset-react

    erstellen und dann eine .babelrc-Datei in mein Projekt-Verzeichnis mit den folgenden:

    {
  "presets": ['react']
}

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

    • Ich habe versucht, für die Stunden, danke das es gelöst für mich.
    InformationsquelleAutor JESii
  4. 1

    Für mich ist die Antwort ging um die presets in der query-block:

    query: {
  presets: ['react', 'es2015']
}
    InformationsquelleAutor JoeTidee
  5. 0

    dies wird mir helfen, um dadurch gelöst, dass Problem.

    neue Datei anlegen .babelrc auf gleiche Verzeichnis webpack.config.js. Fügen Sie diese zu .babelrc

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