Ayuda en la programación, respuestas a preguntas / Javascript / React ES6 SystemJS - Error no detectado (en promesa): Token inesperado <(...) - javascript, reactjs, ecmascript-6, systemjs

Reaccionar ES6 SystemJS - Uncaught (en promesa) Error: Token inesperado <(...) - javascript, reactjs, ecmascript-6, systemjs

yo tengo react y react-dom instalado e importado a través de la System.config a continuación, pero sigo recibiendo este error a continuación:

Error no detectado (en promesa): Token inesperado <(...)

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ES2015 Module Example</title>
</head>
<body>
<script src="lib/system.js"></script>
<script>
System.config({
"baseURL": "src",

// Set defaultJSExtensions to true so you don"t have to use .js extension when importing the es6 module.
"defaultJSExtensions": true,

// "plugin-babel" or "traceur" or "typescript"
transpiler: "traceur",

map: {
"react": "./node_modules/react/dist/react.min.js",
"react-dom": "./node_modules/react-dom/dist/react-dom.min.js",
"traceur": "./lib/traceur.min.js",
"plugin-babel": "./lib/plugin-babel/plugin-babel.js",
"systemjs-babel-build": "./lib/plugin-babel/systemjs-babel-browser.js"
},
});
System.import("app.js");
</script>
</body>
<div id="example"></div>
</html>

app.js:

import React from "react";
import ReactDOM from "react-dom";

var Hello = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});

ReactDOM.render(
<Hello name="World" />,
document.getElementById("example")
);

¿Alguna idea de qué más tengo que configurar?

Respuestas

0 para la respuesta № 1

browserify es la mejor solución (para producción y desarrollo) - para mí:

npm install --save-dev babel-preset-react

trago:

var gulp = require("gulp");

var browserify = require("browserify");
var babelify = require("babelify");
var source = require("vinyl-source-stream");
var buffer = require("vinyl-buffer");
var uglify = require("gulp-uglify");
var sourcemaps = require("gulp-sourcemaps");
var livereload = require("gulp-livereload");

gulp.task("build", function() {
// app.js is your main JS file with all your module inclusions
return browserify({entries: "src/app.js", debug: true})
.transform("babelify", { presets: ["es2015", "react"] })
.bundle()
.pipe(source("compile.min.js"))
.pipe(buffer())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write("./maps"))
.pipe(gulp.dest("js"))
.pipe(livereload());
});

gulp.task("default", ["build"]);

En cuanto a la no producción con SystemJS (dolorosamente lento):

<!DOCTYPE html>
<script src="https://jspm.io/system@0.19.js"></script>
<script>
System.config({
transpiler: "babel",
babelOptions: {}
});
System.import("./main.js");
</script>

Todavía puede usar gulp para el desarrollo. Solo agrega esto al gulpfile:

gulp.task("watch", ["build"], function () {
livereload.listen();
gulp.watch("js/*.js", ["build"]);
});

gulp.task("default", ["watch"]);

Esto le ahorra otros tediosos flujos de trabajo de desarrollo como listado aquí.

-1 para la respuesta № 2

Unexpected token < usualmente ocurre en aplicaciones html5, cuando el servidor está configurado para devolver el contenido de index.html en lugar de 404 páginas (por lo que presionar f5 en el enrutamiento dinámico aún funciona). Verifique el panel de red en la consola del desarrollador de su navegador y vea qué archivo js se entregó con los contenidos html.