Open 1993hxw opened 3 years ago
@1993hxw fix the formatting of the code please
Sorry @1993hxw, but as loadable-components and React-Hot-Loader maintainer I can confirm that it will not hot update.
And with with Fast Refresh
should not update as well - there is no update to the Loadable itself, so the import
will be kept.
Loadable has to be rewritten to hooks to handle HMR out of the box.
However, you can try - https://github.com/pmmmwh/react-refresh-webpack-plugin/
If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.
Description
What you are reporting: When I change a JS file, the browser console prints out where it says updated, and the network also requests the updated bundle, but the page doesn't change. It turns out that the updated bundle is in the head tag, while the bundle generated by the HTML-Webpack-plugin is in the body tag. So the page hasn't been updated. Is there any way to change where the updated bundle is inserted into the DOM
Expected behavior
What you think should happen: When I change a JS file, the page is updated to the latest
Actual behavior
What actually happens: When I change a JS file, the page is not up to date
Environment
React Hot Loader version: "react-hot-loader": "^4.13.0" "@hot-loader/react-dom": "^17.0.0" "webpack": "^4.2.0", "webpack-cli": "^2.0.13" "webpack-dev-server": "^3.1.1" "hot-module-replacement": "^3.0.4"
Run these commands in the project folder and fill in their results:
node -v
: 12.10.0npm -v
: 6.10.3Then, specify:
Reproducible Demo
Please take the time to create a new project that reproduces the issue.
You can copy your project that experiences the problem and start removing things until you’re left with the minimal reproducible demo. This helps contributors, and you might get to the root of your problem during that process.
Push to GitHub and paste the link here.
webpack.common.js
const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { entry: { main: ['react-hot-loader/patch', './src/index.js'] }, output: { path: path.resolve(dirname, '..', './dist'), filename: '[name]-[chunkhash:8].js' }, resolve: { alias: { config: path.resolve(dirname, '../config'), src: path.resolve(dirname, '..', './src') } }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: path.resolve(dirname, '..', './template/index.html'), filename: 'index.html' }) ] };
webpack.dev.js
const { merge } = require('webpack-merge'); const CommonConfig = require('./webpack.common.js'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(CommonConfig, { mode: 'development', output: { ...CommonConfig.output, filename: '[name]-[hash:8].js' }, resolve: { ...CommonConfig.resolve, alias: { ...(CommonConfig.resolve.alias || {}), 'react-dom': '@hot-loader/react-dom' } }, module: { rules: [{ test: /.jsx?$/, use: { loader: 'babel-loader' }, }, { test: /.scss$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }] }] }, devServer: { // host: ip, contentBase: './dist', port: 8200, hot: true, hotOnly: true, inline: true }, plugins: [ ...CommonConfig.plugins, new webpack.HotModuleReplacementPlugin(), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') }) ] });
index.js
import React from 'react'; import ReactDom from 'react-dom'; import App from 'config/app.js';
const render = (Component) => { ReactDom.render( ,
document.getElementById('app'));
};
render(App);
config/app.js
import { hot } from 'react-hot-loader/root'; import React, { Component } from 'react'; import Counter from 'src/counter/index.js'; import Number from 'src/number/index.js';
class App extends React.Component { constructor(props) { super(props); };
};
const HotApp = hot(App)
babel.config.json { "presets": [ [ "@babel/env", { "targets": { "edge": "17", "firefox": "60", "chrome": "67", "safari": "11.1" } } ], [ "@babel/preset-react" ] ], "plugins": [ "@babel/plugin-proposal-class-properties", "react-hot-loader/babel" ] }