index.jsx为
import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router'
import routes from './components/router/router.jsx';
render(
<Router routes={routes} history={browserHistory}/>,
document.getElementById('example')
)
webpack.config.js配置为
{ test: /\.js$/, exclude:/node_modules/, loader: 'babel-loader'},
{ test: /\.jsx$/, exclude: /node_modules/, loader: 'babel-loader!jsx-loader?harmony' }
错误提示
ERROR in ./index.jsx
Module build failed: Error: Parse Error: Line 1: Illegal import declaration
看样子你在使用ES2015
语法写react
,那你的loader
配置不怎么正确,应该是:
{ test: /\.js$/, exclude:/node_modules/, loader: 'babel-loader'},
{ test: /\.jsx$/, exclude: /node_modules/, loader: 'babel?presets[]=react&presets[]=es2015' }
注意需要安装:
npm install --save-dev babel-preset-react babel-preset-es2015
对于 jsx,你的配置的策略现在是先经过 jsx-loader ,然后再经过 babel-loader,然而 jsx-loader 并不能解析 es6 的 import 语法,因此报错。解决的策略上面已经提到,就是直接使用 babel-loader,不再使用 jsx-loader,目前 babel 已经非常完备地支持了 es2015/react 和一些 es7 的语法,完全不再需要 jsx-loader 了。
感觉是没加载 babel-preset-es2015
呀 写没写 .babelrc
?
jsx-loader
已经废弃了,统一使用 babel-loader@>=6
, 需要配置 babelrc
参见:https://babeljs.io/docs/usage/babelrc/
.babelrc 文件
{
presets: [
"es2015",
"react"
]
}
或直接配置在 package.json 里
{
"babel": {
presets: ["es2015", "react"]
}
}