無法解決react-hot-loader/patch

我如何解決控制檯中存在的錯誤。任何建議？無法解決react-hot-loader/patch

ERROR in multi (webpack)-dev-server/client? http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./app/index.jsx dev Module not found: Error: Can't resolve 'dev' in '/Users/saorabh/Documents/react/reactExamples/youtube_video_api' @ multi (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" 
    } 
];

來源

2017-08-07 Priya Singh

無法解決react-hot-loader/patch

回答

相關問題