Question

运行webpack时出现以下错误：

Error in ./src/index.jsx
Module parse failed: .../src/index.jsx Unexpected token (10:18)
You may need an appropriate loader to handle this file type.

我相信我已经设置了所有正确的装载机，请告诉我是否错过了什么。

的package.json：

"dependencies": {
  "isomorphic-fetch": "^2.2.1",
  "koa": "^1.2.4",
  "koa-ejs": "^3.0.0",
  "koa-route": "^2.4.2",
  "koa-router": "^5.4.0",
  "koa-static": "^2.0.0",
  "koa-webpack-dev-middleware": "^1.2.2",
  "node-sass": "^3.10.1",
  "react": "^15.3.2",
  "react-dom": "^15.3.2",
  "react-hot-loader": "^1.3.0",
  "react-redux": "^4.4.5",
  "react-router": "^2.8.1",
  "redux": "^3.6.0",
  "redux-thunk": "^2.1.0",
  "sass-loader": "^4.0.2",
  "style-loader": "^0.13.1",
  "webpack": "^1.13.2"
},
"devDependencies": {
    "babel-core": "^6.17.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.2.6",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.25.0",
    "eslint": "^3.7.1",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-react": "^6.4.1",
    "koa-webpack-hot-middleware": "^1.0.3",
    "react-hot-loader": "^1.3.0",
    "redux-devtools": "^3.3.1",
    "webpack-dev-server": "^1.16.2"
  }

webpack.config.js：

const webpack = require('webpack');

const path = require('path');

const ROOT_PATH = path.resolve(__dirname);

module.exports = {
  devtool: process.env.NODE_ENV === 'production' ? '' : 'source-map',
  entry: [
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
    path.resolve(ROOT_PATH, 'src/index.jsx')
  ],
  module: {
    preLoaders: [{
      test: /\.jsx?$/,
      loaders: process.env.NODE_ENV === 'production' ? [] : ['eslint'],
      include: path.resolve(ROOT_PATH, 'src/index.jsx')
    }],
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'stage-0', 'react'],
        cacheDirectory: true,
        env: {
          development: {
            presets: ['react-hmre']
          }
        }
      },
      include: './src'
    },
    {
      test: /\.scss$/,
      loaders: ['style', 'css', 'sass']
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  output: {
    path: process.env.NODE_ENV === 'production'
      ? path.resolve(ROOT_PATH, 'dist')
      : path.resolve(ROOT_PATH, 'build'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(ROOT_PATH, 'build'),
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};

的src / index.jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

const main = () => {
  const app = document.createElement('div');

  document.body.appendChild(app);

  ReactDOM.render(<App />, app);
};

main();

我也试过没有使用.babelrc文件的任何预设：

{
  "presets": ["es2015", "stage-0", "react"]
}

运行babel src/index.jsx确实按预期工作，所以我认为这是webpack配置的问题。

Answer 1

js（x）加载器的include路径错误。使用

修复

include: path.resolve(ROOT_PATH, './src')

而不是

include: './src'

为什么babel-preset-react不能解析我的JSX？

1 个答案: