jsx構文をコンパイルするためにwebpackの実行中に解析エラーが発生しました。誰かが私にエラーを指摘することができれば感謝します。私は同様の質問Webpack, React, JSX, Babel - Unexpected token <を尋ねたが、解決策はそこに私のために動作しないことを示唆した。Simple Webpack + React + ES6 + babelの例は機能しません。予期しないトークンエラー
これは私の設定ファイルがどのように見えるかです:
{
"name": "dropdowns",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"react": "^15.2.1",
"react-dom": "^15.2.1",
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1"
},
"devDependencies": {
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"author": "",
"license": "ISC"
}
package.jsonは私のwebpack.config.jsファイルには、私がメイン持つローカルアプリフォルダで
module.exports = {
context: __dirname + "/app",
entry: "./main.js",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
です.jsとIdMappingOptions.jsを次のように指定します。
// in IdMappingOptions.js
import React from 'react';
class IdMappingOptions extends React.Component {
render() {
return <span>Hello!</span>
}
}
export default IdMappingOptions;
// in main.js
import React from 'react';
import { render } from 'react-dom';
import IdMappingOptions from './IdMappingOptions';
render(
<IdMappingOptions/>, document.body
);
node_modules/.binファイル/ WebPACKのを実行しているとき、私は次のエラーのトレースを取得:
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.1
Time: 37ms
[0] ./main.js 0 bytes [built] [failed]
ERROR in ./main.js
Module parse failed: /scratch/parallel/repository/dropdowns/app/main.js Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:4)
at Parser.pp.raise (/scratch/parallel/repository/dropdowns/node_module/acorn/dist/acorn.js:923:13)
は編集:以下のコメントどおり は、テストパターンを固定し、webpack.config.jsにバベルコアを追加しました。ここに私です
あなたはあなたのアプリケーションのフォルダ構造を共有することができますか? – Vikramaditya