Сначала я выполняю рендеринг на стороне сервера шаблонов, и все выглядит нормально при начальной загрузке. Однако в процессе разработки, как только я изменяю стили стилизованного компонента и перезагружаюсь, компонент теряет все свои стили. Как ни странно, если я изменю его обратно на исходные стили, стили вернутся и добавят их к элементу. Кто-нибудь знает, почему это происходит?
Webpack.config.js
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'client/index.js'),
output: {
path: path.join(__dirname, 'client-build'),
filename: 'client.bundle.js',
publicPath: path.join('testapp', 'static'),
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: [path.resolve(__dirname, 'client')],
exclude: /node_modules/,
options: {
babelrc: true,
},
},
{
test: /\.pcss$/,
use: [
{
loader: 'style-loader',
options: {hmr: true},
},
],
},
{
test: /\.(html)$/,
loader: 'html-loader',
},
],
},
};
скрипт package.json для наблюдения за клиентом src, использующим webpack
"dev:client": "webpack --watch --mode=development --progress",
server.js
...
app.use(async (ctx) => {
ctx.type = 'text/html';
ctx.body = `<!DOCTYPE html><html><head></head><body><div id='root'>
${renderToString(<App><div>This is render from the server-side template</div></App>)}
</div></body><script src="/testapp/static/client.bundle.js"></script></html>`;
});
app.listen(port);
клиент / index.js
import React from 'react';
import {hydrate} from 'react-dom';
import {App} from './components';
hydrate(
<App>
<div>This is render from the client-side</div>
</App>,
document.getElementById('root')
);
например. styled-component> Компонент приложения
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const PropTypes = {
children: PropTypes.element.isRequired,
};
const App = ({children}) => (
<Container>
{children}
</Container>
);
App.propTypes = PropTypes;
export default App;
const Container = styled.div`
display: flex;
height: 90%;
background: yellow;
`;