为什么在 React 热加载器的 ReactJS 中出现“错误：找不到相对于目录的预设“react-hot”...”？

Question

我正在尝试让 React Hot Reloader 为我的 ReactJS 项目工作，但我收到一个错误 Error: Couldn't find preset "react-hot" relative to directory...

我确实在.babelrc 中设置了预设“react-hot”，但可能是什么问题？我有以下设置：

在我的package.json：

{
  "name": "practicing_client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
  },
  "author": "John Bana",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.14.0",
    "react": "^15.3.1",
    "react-cookie": "^0.4.8",
    "react-dom": "^15.3.1",
    "react-redux": "^4.4.5",
    "react-router": "^2.7.0",
    "redux": "^3.6.0",
    "redux-form": "^6.0.0-rc.3",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "node-sass": "^3.9.3",
    "react-hot-loader": "^3.0.0-beta.3",
    "sass-loader": "^4.0.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  }
}

在我的webpack.config.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
  context: __dirname,
  entry: './src/index.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      test: /\.(js|jsx)$/,
      loader: 'babel'
    },
    {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('css!sass')
    }]
  },
 devServer: {
    historyApiFallback: true,
    contentBase: './'
  },
  plugins: [
    new webpack.DefinePlugin({ 'process.env':{ 'NODE_ENV': JSON.stringify('production') } }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      output: {comments: false },
      mangle: false,
      sourcemap: false,
      minimize: true,
      mangle: { except: ['$super', '$', 'exports', 'require', '$q', '$ocLazyLoad'] }
    }),
  ]
};

module.exports = config;

在我的.babelrc：

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

Answer 1

react-hot-loader 不被 Babel 使用，它被 Webpack 使用。

从你的 Babel 预设中删除 react-hot，然后将加载器添加到你的 Webpack 配置文件中：

loaders: [{
  exclude: /node_modules/,
  test: /\.(js|jsx)$/,
  loaders: ['react-hot', 'babel']
},