React SSR webpack problem

sutriptaroy — Mon, 23 Dec 2019 12:38:10 +0000

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.

DEV Community: sutriptaroy

React SSR webpack problem