标签: react-hot-loader

试图让react-router(v4.0.0)和react-hot-loader(3.0.0-beta.6)很好地播放,但是在浏览器控制台中得到以下错误:

警告:React.createElement:type无效 - 期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件.

index.js:

import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
require('jquery');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './css/main.css';

const renderApp = (appRoutes) => {
    ReactDom.render(appRoutes, document.getElementById('root'));
};

renderApp( routes() );

routes.js:

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import App from './containers/App.jsx';
import Products from './containers/shop/Products.jsx';
import Basket from './containers/shop/Basket.jsx';

const routes …

在数组中添加'react-hot'加载器后出现错误.我已经按照这个教程:https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement但是,我得到了react-hot.

var WebpackDevServer = require("webpack-dev-server");
var webpack = require('webpack');
var path = require('path');
require("babel-polyfill");

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src');

module.exports = {
  entry: [
    'babel-polyfill',
    'bootstrap-loader',
    'webpack/hot/dev-server',
    APP_DIR + '/import.js',
  ],
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel'],
      exclude: /node_modules/,
      query: {
        plugins: ['transform-runtime'],
        presets: ['es2015', 'stage-0', 'react']
      }
    }, {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }, {
      test: /\.scss$/,
      loaders: …

我在Gatsby项目中更新了一些npm软件包,现在我在控制台中看到了这个警告:

React-hot-loader: react--dom patch is not detected. React 16.6+ features may not work.

但是,当我查看源代码时,有一个评论:

// Actually everything works...

这个警告实际意味着什么？这是我应该解决的问题还是让它成为现实？

我见过很少与此类错误相关的帖子.但我的解决方法无法解决.

我的package.json:

"react": "~0.14.7",
"webpack": "^1.12.13",
"react-hot-loader": "^3.0.0-beta.6",
.
.

我在webpack上遇到以下错误:

ERROR in ./public/src/main.js
Module not found: Error: Cannot resolve module 'react-dom' in C:\Users\react-example\public\src 
@ ./public/src/main.js 19:16-36

但在我做的时候在cmd线上

npm -v react-dom

我得到3.10.10.react-dom就在那里.但我想知道为什么它仍然会出现这个错误.

当我通过npm"npm install react-dom"安装react-dom时,运行webpack我得到以下错误:

ERROR in ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
 @ ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js 13:29-72

ERROR in ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
 @ ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js 15:29-72

ERROR in ./~/react-dom/lib/ReactDOMInvalidARIAHook.js
Module not found: Error: Cannot resolve …

[编辑] Github Test Repo为您测试!!

我没有任何问题进行热重新加载,但每当我进行单个css更改时它会重新加载整个页面.我希望它能够注入任何css更改,并且理想情况下与react组件类似,除非真正需要完全重新加载.

**我得到以下控制台日志**

[WDS] App updated. Recompiling...
client?cd17:41 [WDS] App updated. Recompiling...
client?8505:41 [WDS] App updated. Recompiling...
client?cd17:41 [WDS] App updated. Recompiling...
client?8505:41 [WDS] App hot update...
dev-server.js:45 [HMR] Checking for updates on the server...
client?cd17:41 [WDS] App hot update...
dev-server.js:33 [HMR] Cannot apply update. Need to do a full reload!
(anonymous) @ dev-server.js:33
dev-server.js:34 [HMR] Error: Aborted because ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/components/shared/userPages/userPages.css is not accepted
Update propagation: ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/components/shared/userPages/userPages.css -> ./src/components/shared/userPages/userPages.css -> ./src/components/Signin/index.js -> ./src/routes.js -> ./src/index.js -> 0
    at …

它是用我的第一个项目react,react-router,react-hot-loader,webpack-dev-server和webpack.当我更改react组件中的代码时,热加载器变得有效,但同时,控制台告诉我一个警告:

你不能改变"路由器路由"; 它会被忽略.

我不知道如何解决这个问题.有代码:

webpack代码:

    var path = require('path');
    var webpack = require('webpack');

    module.exports = {
      devtool: 'source-map' ,
      entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './jsx/index'
      ],
      output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: '/public/'
      },
      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
      ],
      resolve: {
        extensions: ['', '.js', '.jsx', 'json']
      },
      module: {
        loaders: [{
          test: /\.js$/,
          exclude: /node_modules/,   
          loaders: ['react-hot', 'babel'],
          }]
      },
      watch:true
    };

索引代码:

    import React from 'react' …

我使用 React + Redux + Webpack + WebpackDevserver.一旦热启动器启动,我的所有减速器都将重置为初始状态.

我能以某种方式保持我的减速器处于实际状态吗？

我的Webpack配置包含:

entry: [
    "./index.jsx"
],
output: {
    filename: "./bundle.js"
},
module: {
    loaders: [
        {
            test: /\.js|\.jsx$/,
            exclude: /node_modules/,
            loaders: ["react-hot","babel-loader"],
         }
    ]
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

我的减速器统计数据:

const initialState = {
...
}

export default function config(state = initialState, action) { ...

我只是通过以下方式启动我的Webpack Dev-Server:

"start": "webpack-dev-server",

我在使反应热的webpack加载器正常工作时遇到了一些麻烦.

当我加载页面时,我得到以下内容,如我所料:

[HMR]等待来自WDS的更新信号...
[WDS]启用热模块更换.

但是当我保存更改时,页面会自动刷新浏览器(而不是HMR替换).

//webpack.config.js

 {
  entry: {
    client: 'webpack-dev-server/client?http://localhost:8786', // WebpackDevServer host and port
    app: "./HelloWorld.tsx"
  },
  devtool: process.env.WEBPACK_DEVTOOL || 'cheap-module-source-map',
  output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].entry.js'
  },
  module: {
    loaders: [
      {
        test: /\.ts(x?)$/,
        loaders: ['react-hot', 'babel-loader?cacheDirectory=true,presets[]=es2015,presets[]=react', 'ts-loader']
      }
    ]
  },
    devServer: {
        contentBase: "./dist",
    port:8786
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ]
}

命令: webpack-dev-server --hot --inline

在一个有趣的旁注,如果我使用babel-preset-react-hmre一切按预期工作.(但是我真的不想使用它,因为它似乎比正确的反应热装载机支持更少).

我已经在StackOverflow和GitHub问题上经历了很多答案,但是,我仍然陷入了Webpack中的热模块替换.我npm start用来运行我的服务器webpack-dev-server --hot --inline.我正在尝试更改我的React组件中的代码,但浏览器中没有任何反应.

我在Ubuntu 14.04LTS上使用Google Chrome版本49.0.2623.87(64位).

在我的浏览器中console,我收到日志消息

[HMR]等待来自WDS的更新信号......

[WDS]启用热模块更换.

但是,没有热/实时重载正在发生.当我在React组件文件中更改代码时,没有显示任何内容.我正在关注本教程的第一个视频,Egghead.io/ReactFundamentals,其中一切正常.

以下是我的package.json和webpack.config.js文件.

的package.json

{
  "name": "react-fundamentals",
  "version": "1.0.0",
  "description": "Fundamentals of ReactJS",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --inline"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.0.0-rc.2",
    "react-dom": "^15.0.0-rc.2"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

module.exports = {
  context: __dirname,
  entry: "./main.js", …

我的webpack.config.js

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    context: __dirname,

    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './assets/js/index', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs
    ],

    output: {
        path: path.resolve('./assets/bundles/'),
        filename: "[name]-[hash].js",
        publicPath: 'http://localhost:3000/assets/bundles/', // Tell django to use this URL to load packages and not use STATIC_URL + bundle_name
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(), // don't reload if there is an error
        new …