I'm facing problem with SSR webpack. In client side webpack is not implmenting the react class component behaviour correctly, I guess. Could anyone help my out of this???
webpack.client.js ---
const path = require('path')
module.exports = {
mode: 'development',
target: 'node',
entry: './config/client.js',
output: {
filename: 'client_bundle.js',
path: path.resolve(__dirname, 'build/public'),
publicPath: '/build/public'
},
module: {
rules: [
{
test: [/.svg$/, /.gif$/, /.jpe?g$/, /.png$/],
loader: "file-loader",
options: {
name: "public/media/[name].[ext]",
publicPath: url => url.replace(/public/, "")
}
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: '/node_modules/',
options: {
presets: [
'@babel/preset-react',
['@babel/preset-env', {
targets: {browsers: ['last 2 versions']}
}]
]
}
}
]
}
}
server.js ---
/* suffs ...
app.get('*', (req, res) => {
const context = {}
const content = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
);
const helmet = Helmet.renderStatic();
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#48afd9" />
<link rel="stylesheet" type="text/css" href="/static/styles.css" />
${helmet.title.toString()}
${helmet.meta.toString()}
</head>
<body>
<div id="edtalk-main">
${content}
</div>
<script src="client_bundle.js"></script>
</body>
</html>
`;
res.send(html)
})
... stuffs ***/
With this I'm not able to implement onClick, DidMount method in react class component, while functional components are working fine.
Top comments (0)