Closed JinJieTan closed 4 years ago
what the happen ? Is there anything I need to do? please
Try:
module.hot.accept
AppContainer
from index
import { hot } from 'react-hot-loader';
use import { hot } from 'react-hot-loader/root'
;Try:
- not use
module.hot.accept
- remove
AppContainer
fromindex
- instead of
import { hot } from 'react-hot-loader';
useimport { hot } from 'react-hot-loader/root'
;
I have tried,But it doesn't work.
Thanks for your help. Is there anything else I can do?
remove react-hot-loader/babel and webpack alias :@hot-loader/react-dom , The page can be partially refreshed,But the state is missing,The experience is so bad, I think I still have a problem with another pure Typescript project
Try others solutions listed here - https://github.com/gaearon/react-hot-loader/issues/1453
Try others solutions listed here - #1453
thank you ! I'll watch it now ,In other projects, I didn't have a problem with it, it was very easy to use React -hot-loader
That's why it's not so easy to help you. Like it should work, and if it doesn't - 🤷♂️😭
That's why it's not so easy to help you. Like it should work, and if it doesn't - 🤷♂️😭
In some cases, the app is up to Date, but the interface is not updated. After I change the state, the interface is updated accordingly. What is the problem?
@theKashey
It's a very interesting phenomenon, I've prepared an example, you can see, maybe we can make it better for react-hot-loader, when I go into the todo example, if I change the code at this point, but the page doesn't change, unless I click update status, then the update will show up on the page along with the state change.
url:https://github.com/JinJieTan/mingyuanyun-fd-template
I have exactly same problem with the latest version. Any idea?
I have exactly same problem with the latest version. Any idea? You can use my project, https://github.com/JinJieTan/mingyuanyun-fd-template, but I in another project always have this problem
The problem here but there is actually no plans to continue React-Hot-Loader development, it could be replaced by Refresh today.
The problem here but there is actually no plans to continue React-Hot-Loader development, it could be replaced by Refresh today.
https://github.com/JinJieTan/mingyuanyun-fd-template, I have already solved the problem, but in another project again this question, I have dealt with for a week, haven't solved
I have found the problem, could you please help me have a look at it? It is this file. When I change to other files, it can work as normal hot update
import React, { Fragment } from 'react';
import { Route, Switch, BrowserRouter, Redirect, RouteComponentProps } from 'dva/router';
import Layout from './layout';
import { SubscriptionAPI } from 'dva';
import Loadable from 'react-loadable';
import { Spin } from 'antd';
import OldContainer from '../routers/contract/OldContainer';
const loading = () => {
return <Spin />;
};
const AddIntent = Loadable({
loader: () => import('../routers/intent/add'),
loading,
});
const AddContract = Loadable({
loader: () => import('../routers/contract/add'),
loading,
});
const ChangeFee = Loadable({
loader: () => import('../routers/contract/changeFee'),
loading,
});
const ContractDetail = Loadable({
loader: () => import('../routers/contract/ContractDetail'),
loading,
});
const AddPropertyContract = Loadable({
loader: () => import('../routers/contract/add'),
loading,
});
const PropertyContractContractDetail = Loadable({
loader: () => import('../routers/propertyContract/ContractDetail'),
loading,
});
const Init = Loadable({
loader: () => import('./login'),
loading,
});
const Home = Loadable({
loader: () => import('./home'),
loading,
});
class App extends React.PureComponent<RouteComponentProps & SubscriptionAPI> {
public render() {
const { match, location, history } = this.props;
const params = (match || {}).params || {};
return (
<BrowserRouter basename="/pact">
<Layout>
<OldContainer>
<Switch>
<Route
path="/intent/add"
key="/intent/add"
exact
component={() => {
return (
<AddIntent
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/intent/add/:room_id"
key="/intent/add/:room_id"
component={() => {
return (
<AddIntent
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/intent/detail/:detail_id"
key="/intent/detail/:detail_id"
component={() => {
return (
<AddIntent
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/intent/edit/:edit_id"
key="/intent/edit/:edit_id"
component={() => {
return (
<AddIntent
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/contract/add"
key="/contract/add"
component={() => {
return (
<AddContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/contract/detail/:detail_id"
key="/contract/detail/:detail_id"
component={() => {
return (
<AddContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/contract/add/:room_id"
key="/contract/add/:room_id"
component={() => {
return (
<AddContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/contract/book/:book_room_id"
key="/contract/book/:book_room_id"
component={() => {
return (
<AddContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/contract/edit/:contact_id"
key="/contract/edit/:contact_id"
component={() => {
return (
<AddContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/contract/lease/:lease_lease"
key="/contract/lease/:lease_lease"
component={() => {
return (
<AddContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/contract/contractlease/:contract_lease"
key="/contract/contractlease/:contract_lease"
component={() => {
return (
<AddContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/contract/change/:change_contract_id"
key="/contract/change/:change_contract_id"
component={() => {
return (
<AddContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/contract/change-detail/:change_detail_id"
key="/contract/change-detail/:change_detail_id"
component={() => {
return (
<AddContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/contract/intentRoom/:intent_room_id"
key="/contract/intentRoom/:intent_room_id"
component={() => {
return (
<AddContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/contract/intent/:intent_id"
key="/contract/intent/:intent_id"
component={() => {
return (
<AddContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/contract/temp/:temp_id"
key="/contract/temp/:temp_id"
component={() => {
return (
<AddContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/contract/change-fee/:contact_id"
key="/contract/change-fee/:contact_id"
component={() => {
return (
<ChangeFee
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/change/edit"
key="/change/edit"
component={() => {
return (
<ContractDetail
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/change/edit/:contract_id"
key="/change/edit/:contract_id"
component={() => {
return (
<ContractDetail
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/change/change-detail/:id/:showType"
key="/change/change-detail/:id/:showType"
component={() => {
return (
<ContractDetail
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/property-contract/add"
key="/property-contract/add"
component={() => {
return (
<AddPropertyContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/property-contract/edit/:contact_id"
key="/property-contract/edit/:contact_id"
component={() => {
return (
<AddPropertyContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/property-contract/temp/:temp_id"
key="/property-contract/temp/:temp_id"
component={() => {
return (
<AddPropertyContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/property-contract/detail/:detail_id"
key="/property-contract/detail/:detail_id"
component={() => {
return (
<AddPropertyContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/property-contract/contractlease/:contract_lease"
key="/property-contract/contractlease/:contract_lease"
component={() => {
return (
<AddPropertyContract
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/property-change/edit"
key="/property-change/edit"
component={() => {
return (
<PropertyContractContractDetail
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/property-change/edit/:contract_id"
key="/property-change/edit/:contract_id"
component={() => {
return (
<PropertyContractContractDetail
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Route
exact
path="/property-change/change-detail/:id/:showType"
key="/property-change/change-detail/:id/:showType"
component={() => {
return (
<PropertyContractContractDetail
params={params}
route={match}
location={location}
history={history}
/>
);
}}
/>
<Redirect exact from="/*" to="/contract/add" />
</Switch>
</OldContainer>
</Layout>
</BrowserRouter>
);
}
}
export default App;
I can be sure that my configuration is fine, because in this project, some of my components can, again, be introduced lazily, but some of the TSX components mixed with JS cannot be hot-updated
All problems are solved, because I react life cycle using the arrow function, so did not respond to a hot update, recommend use my warehouse to implement hot update: https://github.com/JinJieTan/mingyuanyun-fd-template, thank you!
component={() => {
return (
<PropertyContractContractDetail
params={params}
route={match}
location={location}
history={history}
/>
);
}}
👆 that is very bad. A full update on every update.
pretty sure you wanted to use render
, not component
component={() => { return ( <PropertyContractContractDetail params={params} route={match} location={location} history={history} /> ); }}
👆 that is very bad. A full update on every update.
pretty sure you wanted to use
render
, notcomponent
The problem is not here, in Render and componentDidmount
There as well 😉. Might be another problem, but still a problem.
Thanks, React -hot-loader 666, that's great
in another pure Typescript project, I succeeded,However, in this javascript & Typescript project, I failed. App is up to Date, but the page doesn't change
It means that I:
Everything seems to be working fine,, but the page doesn't change .
webpack.base.concig.js
webpack.dev.config.js
scripts:
index.tsx :
app.tsx:
package.json :
tsconfig.json