webpack-dev-server报错求助

Question

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

Answer 1

jsx-loader 已经废弃了，统一使用 babel-loader@>=6, 需要配置 babelrc 参见：https://babeljs.io/docs/usage/babelrc/

.babelrc 文件

{
  presets: [
    "es2015",
    "react"
  ]
}

或直接配置在 package.json 里

{
  "babel": {
    presets: ["es2015", "react"]
  }
}

Answer 2

看样子你在使用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

Answer 3

感觉是没加载 babel-preset-es2015 呀 写没写 .babelrc ?

Answer 4

对于 jsx，你的配置的策略现在是先经过 jsx-loader ，然后再经过 babel-loader，然而 jsx-loader 并不能解析 es6 的 import 语法，因此报错。解决的策略上面已经提到，就是直接使用 babel-loader，不再使用 jsx-loader，目前 babel 已经非常完备地支持了 es2015/react 和一些 es7 的语法，完全不再需要 jsx-loader 了。