CODEWITHSUNDEEP
javascriptnode.jsreactjswebpackreact-hot-loader
user3259472
user3259472

Reputation:

Why the 'Error: Couldn't find preset "react-hot" relative to directory..." in ReactJS for React Hot Loader?

I am trying to get React Hot Reloader to work for my ReactJS project, but I am getting an error Error: Couldn't find preset "react-hot" relative to directory...

I did set up preset "react-hot" in .babelrc but what may be the issue? I have the following set up:

In my 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"
  }
}

In my 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;

In my .babelrc:

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

Upvotes: 0

Views: 820

Answers (1)

Michael Parker
Michael Parker

Reputation: 12966

react-hot-loader isn't used by Babel, it's used by Webpack.

Remove react-hot from your Babel presets, then add the loader to your Webpack configuration file:

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

Upvotes: 1

Related Questions