Closed Racle closed 7 years ago
π + 1, same issue on osx and chrome (not tested elsewhere), terminal and browser both log change events yet nothin on page reloads / changes. Using reload option like app.use(require("nwb/express")(express, { reload: true }));
doesn't seem to work either.
This happens in fresh nwb react build using hello world example.
Can you provide a repro repo so this is easier to test?
I use the middleware for hot-reloading development at work with no problems, so a full repo allows me more easily compare a working configuration with a broken one.
@insin can't provide full repo as it is private, but here is server.js that uses the middleware:
const express = require("express");
const compression = require("compression");
const app = express();
const nwb = require("nwb/express");
// Disable X-Powered-By header for security reasons
app.disable("x-powered-by");
// Set port
app.set("port", process.env.PORT || 3000);
// Production specific config
if (process.env.NODE_ENV === "production") {
// gZip
app.use(compression());
app.use(express.static("dist"));
app.get("*", (req, res) => {
res.sendFile(`${__dirname}/dist/index.html`);
});
} else {
app.use(nwb(express));
}
// Start the app
app.listen(app.get("port"), error => {
if (error) return console.error(error.message);
console.log(`π¨ Server started at: port: ${app.get("port")}`);
console.log(`π Enviroment: ${process.env.NODE_ENV}\n`);
});
let me know if there are other places you need to examine, will do my best to post snippets here. In general hot reloading appears to work, i.e. browser receives and logs events in console, there are outputs in terminal, yet nothing changes visually on a page until manually refreshed.
A sample of your client app's entry point and how you write components would be useful too, in that case, as nwb is still using (the now-deprecated) https://github.com/gaearon/react-transform-hmr
Keeping a keen eye on https://github.com/facebookincubator/create-react-app/pull/2304 too, as Dan Abramov has the hot reloading bug again πΈ
Sure, here they are:
App.js
import React, { Component } from "react";
import PushNotificationIOS from "./components/PushNotificationIOS";
class App extends Component {
render() {
return <PushNotificationIOS />;
}
}
export default App;
PushNotificationIOS.js
import React, { Component } from "react";
import styled, { keyframes } from "styled-components";
import anchor from "../assets/anchor.svg";
const slide = keyframes`
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0); }
`;
const SContainer = styled.div`
width: 300px;
border-radius: 15px;
background-color: rgba(236, 236, 236, 0.9);
overflow: hidden;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
color: #424242;
opacity: 0;
transform: translateY(-40px);
will-change: transform, opacity;
animation: .4s ease .3s forwards ${slide};
`;
const SHeader = styled.div`
background-color: rgba(255, 255, 255, 0.85);
padding: 6px 33px;
letter-spacing: 1px;
position: relative;
&::before {
content: '';
width: 18px;
height: 18px;
background-color: #4db7c3;
background-image: url(${anchor});
background-size: auto 80%;
background-position: center;
display: block;
position: absolute;
left: 9px;
top: 7px;
border-radius: 3px;
}
&::after {
content: "now";
position: absolute;
display: inline-block;
right: 12px;
font-size: 10px;
opacity: 0.8;
top: 9px;
}
`;
const SContent = styled.div`
padding: 10px 15px;
opacity: 0.8;
font-size: 14px;
`;
const SFooter = styled.div`
font-size: 10px;
opacity: 0.8;
padding: 0 15px 7px 15px;
`;
class PushNotificationIOS extends Component {
render() {
return (
<SContainer>
<SHeader>Loot</SHeader>
<SContent>β¬7.80 ~ Β£6.20 Spent</SContent>
<SFooter>Press for more</SFooter>
</SContainer>
);
}
}
export default PushNotificationIOS;
Here is full test app. Server and client side code. Just run yarn install
or npm install
and then npm run start-server
. Might have some leftovers, its stripped down from what i've used.
Thanks, will have a look
@Racle - it's not patching the component because you're defining render
like this:
render = () => {
I don't think React Transform HMR knows how to deal with this, or isn't looking for this way of defining it, as you don't need to bind render
to the instance.
It works if you define render like this instead:
render() {
Something else I noticed based on a console error - you don't need the <script src="index.js"></script>
in your index.html
, as HtmlWebpackPlugin
handles inserting <script>
tags to load the app.
You also might not need app.use(express.static('public'))
when using nwb's middleware, as CopyPlugin
should be serving the contents of public/
from memory when that directory exists.
I'm totally stealing that // THIS IS POTENTIALLY OK
comment for future use, too πΉ
@insin as a side note, my components are standard react classes with normal render i.e.
class Button extends Component {
static propTypes = {
children: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired
};
render() {
const { children, onClick, ...props } = this.props;
return (
<button onClick={onClick} {...props}>
{children}
</button>
);
}
}
And development is not using static
const express = require("express");
const compression = require("compression");
const app = express();
// Disable X-Powered-By header for security reasons
app.disable("x-powered-by");
// Set port
app.set("port", process.env.PORT || 3000);
// Production specific config
if (process.env.NODE_ENV === "production") {
// gZip
app.use(compression());
app.use(express.static("dist"));
app.get("*", (req, res) => {
res.sendFile(`${__dirname}/dist/index.html`);
});
} else {
const nwb = require("nwb/express");
app.use(nwb(express));
}
// Start the app
app.listen(app.get("port"), error => {
/* eslint-disable */
if (error) return console.error(error.message);
console.log(`π¨ Server started at: port: ${app.get("port")}`);
console.log(`π Enviroment: ${process.env.NODE_ENV}\n`);
});
So I am still confused to why any sort of reloading won't work. Again all events seem to be received fine in console, just nothing updates on screen. I wonder if react 16 could be an issue? π€ Although I am not using nothing fancy like returning components in array etc.
This issue is a:
System: Windows 10 enterprise Node 6
Installed modules:
Description:
Got basic app structure (created with nwb new react-app), with added server folder in root. Server folder includes index.js. Hot reload doesn't work with every change. ex. adding h2 tag with text doesn't seems to be working (or changing text), but adding Row or Col, it's seems to be changing web page. server/index.js file changes doesn't register to reload. Console says next:
And in chrome console
On network tab there is no sign of hot reload.
Nothing happens on localhost:3000, but after restarting node server/index.js, all my changes are there. index.js
I start server with
node server/server.js
(script in my package.json)