javascript - props - react router
Reaccionar, babel, paquete web no analizar código jsx (5)
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ó
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.
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
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"]
}]
}
}
}
}
}
Necesita agregar ajustes preestablecidos a su cargador de babel:
{
test: //.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
presets: [''es2015'', ''react'']
},
Para mí, la respuesta fue incluir los ajustes preestablecidos en el bloque de consulta:
query: {
presets: [''react'', ''es2015'']
}