javascript - props - react router

Reaccionar, babel, paquete web no analizar código jsx

Question

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

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

He visto exactamente las mismas preguntas después de buscar, pero ninguna de las respuestas pareció aplicarse a mí. Recibo el siguiente error al ejecutar webpack :

ERROR en ./app.js
La compilación del módulo falló: SyntaxError: path / to / project / react-webpack-project / app / app.js: token inesperado (5: 2)

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

No estoy seguro de por qué estoy recibiendo este error todavía. Supongo que tiene algo que ver con mi archivo webpack.config.js, pero no el 100% de cuál es el problema.

Answer 1

Actualmente estoy usando React 0.14.3. La solución ReactDOM no funcionó, ni tampoco agregó los presets de babel en webpack.config.js. Básicamente, esas soluciones parecen funcionar solo si tienes un solo cargador definido, pero tengo tanto el cargador de babel como el cargador de reacción en caliente.

¿Qué trabajo DID fue instalar el módulo de preselecciones de babel react:

npm install babel-preset-react

y luego cree un archivo .babelrc en el directorio de mi proyecto con lo siguiente:

{
"presets": [''react'']
}

Esto está documentado en http://babeljs.io/docs/plugins/preset-react/ , como lo señaló

Answer 2

En primer lugar: si está utilizando React v ^ 0.14, debe procesar su código con React-Dom. https://www.npmjs.com/package/react-dom

En segundo lugar, esto debería resolver su problema: babel-loader jsx SyntaxError: token inesperado

Answer 3

Esto es ayudarme a resolver ese problema.

cree el nuevo archivo .babelrc en el mismo directorio webpack.config.js. Agregue esto a .babelrc

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

Answer 4

Necesita agregar ajustes preestablecidos a su cargador de babel:

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

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

Answer 5

Para mí, la respuesta fue incluir los ajustes preestablecidos en el bloque de consulta:

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