无法解析 react-hot-loader/patch

Posted 2023-02-21

【中文标题】无法解析 react-hot-loader/patch

【英文标题】：Can't resolve react-hot-loader/patch

【发布时间】：2018-01-15 02:27:04

【问题描述】：

如何解决控制台中的错误。有什么建议吗？

多 (webpack)-dev-server/client 中的错误？http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./app/index.jsx dev 找不到模块：错误：无法解析“开发” '/Users/saorabh/Documents/react/reactExamples/youtube_video_api' @ 多 (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./app/index.jsx dev

在我的 webpack 配置中

"use strict";
var webpack     = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var htmlWebpackPlugin = require('html-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "8888";

loaders.push(
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader?importLoaders=1'],
    exclude: ['node_modules']
);

loaders.push(
    test: /\.scss$/,
    loaders: ['style-loader', 'css-loader?importLoaders=1', 'sass-loader'],
    exclude: ['node_modules']
);

module.exports = 
    entry: [
        'react-hot-loader/patch',
        './app/index.jsx', // your app's entry point
    ],
    devtool: process.env.WEBPACK_DEVTOOL || 'eval-source-map',
    output: 
        publicPath: '/',
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    ,
    resolve: 
        extensions: ['.js', '.jsx']
    ,
    module: 
        loaders
    ,
    devServer: 
        contentBase: "./public",
        // do not print bundle build stats
        noInfo: true,
        // enable HMR
        hot: true,
        // embed the webpack-dev-server runtime into the bundle
        inline: true,
        // serve index.html in place of 404 responses to allow HTML5 history
        historyApiFallback: true,
        port: PORT,
        host: HOST
    ,
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin(
                filename: 'style.css',
                allChunks: true
        ),
        new DashboardPlugin(),
        new HtmlWebpackPlugin(
            template: './app/index.html',
            files: 
                css: ['style.css'],
                js: [ "bundle.js"],
            
        )
    ]
;

在 .bablelrc 中

  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["react-html-attrs","transform-runtime", "transform-decorators-legacy", "transform-class-properties", "react-hot-loader/babel"]

应用入口点

import 'react-hot-loader/patch';
import React from 'react';
import ReactDOM from 'react-dom';
import  AppContainer  from 'react-hot-loader'

import Application  from './components/app';

render((
  <AppContainer>
    <Application />
  </AppContainer>
), document.getElementById('app'));

我是新来的反应，当我尝试几个例子时，我正在考虑这个问题以寻求帮助或建议。

---

在 webpack 加载器中

module.exports = [
    
      test: /\.es6\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
  ,
    
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components|public\/)/,
        loader: "babel-loader"
    ,
    
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        exclude: /(node_modules|bower_components)/,
        loader: "file-loader"
    ,
    
        test: /\.(woff|woff2)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "url-loader?prefix=font/&limit=5000"
    ,
    
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        exclude: /(node_modules|bower_components)/,
        loader: "url-loader?limit=10000&mimetype=application/octet-stream"
    ,
    
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        exclude: /(node_modules|bower_components)/,
        loader: "url-loader?limit=10000&mimetype=image/svg+xml"
    ,
    
        test: /\.gif/,
        exclude: /(node_modules|bower_components)/,
        loader: "url-loader?limit=10000&mimetype=image/gif"
    ,
    
        test: /\.jpg/,
        exclude: /(node_modules|bower_components)/,
        loader: "url-loader?limit=10000&mimetype=image/jpg"
    ,
    
        test: /\.png/,
        exclude: /(node_modules|bower_components)/,
        loader: "url-loader?limit=10000&mimetype=image/png"
    
];

【参考方案1】：

我也有同样的问题，react-hot-loader@v1.3.1

解决办法是

npm i -D react-hot-loader@next

https://github.com/gaearon/react-hot-loader/tree/master/docs#migration-to-30