DEV Community


Posted on


React SSR webpack problem

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-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 />

const helmet = Helmet.renderStatic();

const html = `
    <!DOCTYPE html>
    <html lang="en">
            <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" />
            <div id="edtalk-main">
            <script src="client_bundle.js"></script>


... 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)

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.