Nicht ES6 import JSX-Module im Webpack
Für einige Grund, warum ich kann nicht scheinen, um Webpack import-Module aus .JSX-Dateien. Jedes mal, wenn ich versuche zu laufen Webpack werde ich diese Meldung bekommen:
ERROR in ./src/Example.jsx
Module parse failed: /path/to/project/src/Example.jsx Unexpected token (6:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:12)
Die Sache ist; es gibt nicht eine ganze Menge in ./src/Beispiel.jsx. In der Tat ist dies alles, was es enthält:
import React from 'react';
export default class Example extends React.Component{
render() {
return (<h2>Hello world!!</h2>);
}
};
Webpack habe keine Probleme, wenn ich die Klasse in meinem index.jsx-Datei, aber wenn ich es bewegt zu seiner eigenen Datei webpack plötzlich konnte herausfinden, was zu tun ist. Ich habe versucht, diese zu lösen, indem Sie mit babel-plugin-transform-reagieren-jsx aber das scheint nicht mein problem zu lösen. Was muss ich tun, um Webpack richtig konvertieren/Parsen .JSX-Dateien?
/* - Paket.json */
{
...,
"dependencies": {
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"webpack": "1.13.1"
},
"devDependencies": {
"concurrently": "^2.2.0",
"eslint": "^3.1.1",
"eslint-plugin-react": "^5.2.2",
"jest-cli": "^13.2.3",
"react-addons-test-utils": "^15.2.1",
"webpack-dev-server": "^1.14.1"
},
"scripts": {
"build": "webpack -p",
"dev": "webpack-dev-server --port 9999",
"start": "npm run build && python -m SimpleHTTPServer 9999",
"test": "jest --verbose --coverage --config jest.config.json"
}
}
/* webpack.config.js */
var path = require('path');
var webpack = require('webpack');
var BUILD_DIR = path.resolve(__dirname, 'build/');
var SOURCE_DIR = path.resolve(__dirname, 'src/');
module.exports = {
entry: SOURCE_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /[^\.spec]+\.jsx$/,
include: SOURCE_DIR,
loader: 'babel'
}
]
}
};
/* .baberc */
{
"presets": ["es2015", "react"]
}
/* src/index.jsx */
import React from 'react'
import ReactDOM from 'react-dom';
import Example from './Example'
ReactDOM.render(<Example />, document.getElementById('floor-plan'));
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich habe Ihr setup funktioniert mit diesen wenigen änderungen. Ich habe das problem isoliert auf Ihre Eigenschaft testen.
Der Grund sein könnte
import Example from './Example'
imindex.jsx
webpack zu behandeln, wird dies als
js
importieren stattjsx
.versuchen
import Example from './Example.jsx'