标签: react-hot-loader

我在使用带有webpackdevserver的react路由器设置单页反应应用程序时遇到了一些问题.如果我使用browserhistory webpack在输入嵌套路由url时会遇到一些问题(例如/ client/view).这可以通过添加apiFallback来解决,但热重载仍然有问题.它尝试从不存在的深层URL(/client/view/hot-update.json)加载hot-update.json文件,因此失败并重新加载页面.如何告诉hotreload始终从基本URL(/)加载hot-update.json？

我有一个基本设置，每个应用程序都在一个单独的目录中，我使用自定义服务器使用webpack-dev-middleware/编译它们webpack-hot-middleware。一切正常，只是我无法让 HMR 为第二个应用程序工作（我正在使用react-hot-loader）。

这是说明问题的最小回购： https //github.com/AmrN/multi-react-app-hmr

我的主要代码文件：

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = function (appName) {
  return {
    devtool: 'cheap-module-eval-source-map',
    entry: [
      'react-hot-loader/patch',
      'webpack-hot-middleware/client',
      path.join(__dirname, appName, 'index'),
    ],
    output: {
      path: path.join(__dirname, 'dist', appName),
      filename: 'bundle.js',
      publicPath: '/'+appName+'/'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      new HtmlWebpackPlugin({
        template: path.join(__dirname, appName, 'index.html'),
      }),
    ],
    module: {
      loaders: [{
        test: /\.jsx?$/,
        loaders: ['babel-loader'],
        exclude: /node_modules/, …

我是React和React Hot Loader的新手.我有一个Symfony 2.7应用程序,并开始使用webpack并做出反应.

一般来说一切正常,但是当我想使用Hot Reloading时,我收到错误:

Ignored an update to unaccepted module ./app/Resources/js/app.js -> 0
[HMR] The following modules couldn't be hot updated: (They would need a full reload!)
[HMR]  - ./app/Resources/js/app.js

我在这里遗漏任何基本的东西.我很新,所以这可能是一个简单的答案.非常感谢

这是我的基本代码:

的package.json

"dependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-hot-loader": "^1.3.1",
    "webpack-dev-server": "^2.6.1"
  }

app.js

import React from 'react';
import ReactDOM from 'react-dom';
// import ReactHotLoader from 'react-hot-loader';
import Component from './component.js';

// const element = …

我已经使用HMR / React Hot Reloader进行了所有工作，因为它与视图有关。但是在添加了redux，react-redux等之后，每当我修改视图或化简器时，都会出现以下错误：

<Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

遵循错误中的链接会导致有2年的历史，关于明确使用replaceReducer的帖子，这就是我所做的。

我的版本：

“ redux”：“ ^ 3.7.2”“ react-redux”：“ ^ 5.0.6”

我感觉这主要是由于我对我的module.hot.accept调用的位置和放置方式缺乏了解（如果可以包含多个呢？）。相关代码如下。

boot.js（入口点）

import { Provider } from 'react-redux';
import { AppContainer } from 'react-hot-loader';
import { ConnectedRouter } from 'react-router-redux';

import App from './App';

import …

我有两个组件,App和Root.应用程序有路由,并提供常见的布局.

const App = () => (
  <Layout>
    <Routes />
  </Layout>
)

const Root = () => (
  <Providers>
    <App />
  </Providers>
)

同时Providers包含redux Provider,redux-persist PersistGate和react-router-redux ConnectedRouter.

所以,我的主要问题是

1. 我应该把hot(module)(Component)助手放在哪里？在App？或者Root？

这些都是关于AppContainerAPI的.

2. hot帮手和AppContainer？之间的区别是什么？有没有AppContainer比这更合适的特殊情况hot？

我为react16创建了新的样板.

https://github.com/jasonvillalon/react16-boilerplate

它在开发中运行时使用:

npm start
npm start:webpack

但是在生产中运行时会在renderToString上抛出错误

NODE_ENV=production npm start

webpack成功而没有错误,但在呈现页面时出现错误:

ERROR: TypeError: Cannot set property 'getCurrentStack' of undefined
at setCurrentDebugStack (webpack:///./node_modules/react-dom/cjs/react-dom-server.node.development.js?:1816:48)
at ReactDOMServerRenderer.read (webpack:///./node_modules/react-dom/cjs/react-dom-server.node.development.js?:2225:13)
at renderToString (webpack:///./node_modules/react-dom/cjs/react-dom-server.node.development.js?:2494:29)
at _callee$ (webpack:///./src/server.jsx?:66:49)
at tryCatch (/Users/jasonvillalon/Documents/fun-projects/from-scratch/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:65:40)
at Generator.invoke [as _invoke] (/Users/jasonvillalon/Documents/fun-projects/from-scratch/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:303:22)
at Generator.prototype.(anonymous function) [as next] (/Users/jasonvillalon/Documents/fun-projects/from-scratch/node_modules/babel-polyfill/node_modules/regenerator-runtime/runtime.js:117:21)
at step (webpack:///./src/server.jsx?:27:191)
at eval (webpack:///./src/server.jsx?:27:437)
at new Promise (<anonymous>)

任何人都知道发生了什么事？

最诚挚的问候,杰森

使用webpack 4示例实现热模块替换效果非常好，而且我的 React 组件也能顺利渲染。

然而，在最后的 webpack 文档中，提到了react-hot-loader。

任何人都可以解释一下 webpack4 中的 HMR 和使用 react-hot-loader 实现的 HMR 之间的区别吗？实现react redux有什么区别吗

我正在开始一个新项目，虽然使用完整的 firebase 模拟器套件会很好。

这是我认为可以工作的：

// THIS IS MY package.json SCRIPT

"start-firebase-build": "set NODE_ENV=development_firebase&& webpack --config webpack.config.js",

webpack.config.js

该 webpack 配置将执行以下操作：

if (DEVELOPMENT_FIREBASE) {
  
  const DEV_PLUGINS = [
    new webpack.HotModuleReplacementPlugin(),             // ENABLE HMR
    new webpack.HashedModuleIdsPlugin()                   // INCLUDE HASH IN MODULE IDS AND FILENAMES
  ];
  const PLUGINS = config.plugins.concat(DEV_PLUGINS);     // MERGE COMMON AND DEV PLUGINS

  config = {
    ...config,
    watch: true,
    mode: "development",
    devtool: "inline-source-map",
    plugins: PLUGINS,
    output: {
      filename: "[name].[hash:5].js",
      path: path.resolve(__dirname, "public"),           // OUTPUT FILES WILL BE IN /public
      publicPath: …

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

多 (webpack)-dev-server/client 中的错误？http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./app/index.jsx dev 未找到模块：错误：无法解析“/Users/saorabh”中的“dev” /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 = { …

可能一直都在问这个问题，但是我在阳光下尝试了所有方法，却找不到解决方案。

我创建了一个回购协议，以便更轻松地获取帮助。您可以克隆它，运行npm install，然后npm start:dev在http：// localhost：8080上看到一个快速的本地服务器。

它可以正常工作，并且当我更改文件（例如src/components/Note/Note.css）时，应用程序会重新加载。但是，我只想重新加载组件，而不是整个页面。我不确定自己在做什么错。任何帮助将不胜感激！

我有一个 react/redux 应用程序，当文件更改并点击保存时，它会刷新页面并清除所有 redux 数据。我知道我可以将 redux 数据保存到本地存储。我想知道的是，当文件更改时，react/node 服务器刷新页面的默认行为是什么？如果不是，我该如何预防？

鉴于这些是我正在使用的依赖项:

"react-hot-loader": "3.0.0-beta.7",
"webpack": "2.6.1",
"webpack-dev-middleware": "^1.11.0",
"webpack-hot-middleware": "^2.18.1",
"webpack-merge": "^4.1.0"

错误

patch.js:5 

Uncaught ReferenceError: development is not defined
    at Object.defineProperty.value (patch.js:5)
    at __webpack_require__ (bootstrap 921586e…:659)
    at fn (bootstrap 921586e…:85)
    at Object.options.path (patch.js:1)
    at __webpack_require__ (bootstrap 921586e…:659)
    at fn (bootstrap 921586e…:85)
    at Object.<anonymous> (process-update.js:132)
    at __webpack_require__ (bootstrap 921586e…:659)
    at validateFormat (bootstrap 921586e…:708)
    at bootstrap 921586e…:708

您可能想要查看此回购 

的WebPack-配置

const FILE_PATHS = {
  entry: path.resolve('./src/index.js'),
  reactHotLoader: 'react-hot-loader/patch',
  hmrEntry: 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', // this is from the webpack-hot-middleware docs
  output: '/' // this …

我遇到了一个错误,我认为是来自webpack的一方.这里是:

index.js:9 Uncaught ReferenceError: global is not defined
    at eval (index.js:9)
    at Object.<anonymous> (bundle.js:2548)
    at __webpack_require__ (bundle.js:622)
    at fn (bundle.js:48)
    at eval (client:1)
    at Object.<anonymous> (bundle.js:2541)
    at __webpack_require__ (bundle.js:622)
    at bundle.js:668
    at bundle.js:671

我的网站是:

import webpack from 'webpack';
import merge from 'webpack-merge';
import path from 'path';
import isDev from 'isdev';
import { Dir } from './src/utils';

const TARGET = process.env.npm_lifecycle_event;

let Config = {
  entry: [
    'babel-polyfill',
    'react-hot-loader/patch',
    path.join(Dir.src, 'client.js'),
  ],
  output: {
    path: path.join(Dir.public, 'build'),
    filename: 'bundle.js',
  },
  target: …