Razzle: Server and client content do not match in TS app

Created on 20 Jun 2018 · 8Comments · Source: jaredpalmer/razzle

Using a fresh copy of the with-typescript example, I've run into an error Text content did not match. Server: "Welcome to Razzles" Client: "Welcome to Razzle" after I made a quick edit in Home.tsx. While HMR works fine on the client and the content changes as expected, the error is thrown after I reload the page. I'm not seeing this issue after creating a new Razzle app using create-razzle-app with JS, though, so it leads me to think something may not be right with the build process using TS.

razzle: 2.2.0
razzle-plugin-typescript: 2.2.0
typescript: 2.9.2

stale

Source

corydeppen

👍1

Most helpful comment

According to ts-loader's doc:

https://github.com/TypeStrong/ts-loader#hot-module-replacement

Inside your HMR acceptance callback function, you must re-require the module that was replaced.

So I made some changes to src/index.ts and it finally works:

import express from 'express'
import app from './server'

const port = process.env.PORT || 3000

// 1. a dynamic middleware
let middleware = app

express()
  .use((req, res, next) => {
    // 2. use that middleware
    middleware(req, res, next)
  })
  .listen(port, (err: Error) => {
    if (err) {
      console.error(err)
      return
    }
    console.log(`> Started on port ${port}`)
  })

if (module.hot) {
  module.hot.accept('./server', () => {
    // 3. re-require the module
    const nextApp: any = require('./server').default
    // 4. and assign it to the middleware
    middleware = nextApp

    console.log('🔁  HMR Reloading `./server`...')
  })
  console.info('✅  Server-side HMR Enabled!')
}

buffaybu on 10 Jul 2018

👍4 🎉1

All 8 comments

Same here 👋. HMR server logs looks fine like...

🔁  HMR Reloading `./server`...
[HMR] Updated modules:
[HMR]  - ./src/server.tsx
[HMR] Update applied.

... but I have to exit yarn start and run it again to see my changes on server. Client HMR works fine. Default Razzle app works nice with server reloads but TS version is broken.

razzle: 2.2.0
razzle-plugin-typescript: 2.2.0
typescript: 2.8.3
node: 8.11.3

topas on 3 Jul 2018

👍1

pavelprokes on 3 Jul 2018

According to ts-loader's doc:

https://github.com/TypeStrong/ts-loader#hot-module-replacement

Inside your HMR acceptance callback function, you must re-require the module that was replaced.

So I made some changes to src/index.ts and it finally works:

import express from 'express'
import app from './server'

const port = process.env.PORT || 3000

// 1. a dynamic middleware
let middleware = app

express()
  .use((req, res, next) => {
    // 2. use that middleware
    middleware(req, res, next)
  })
  .listen(port, (err: Error) => {
    if (err) {
      console.error(err)
      return
    }
    console.log(`> Started on port ${port}`)
  })

if (module.hot) {
  module.hot.accept('./server', () => {
    // 3. re-require the module
    const nextApp: any = require('./server').default
    // 4. and assign it to the middleware
    middleware = nextApp

    console.log('🔁  HMR Reloading `./server`...')
  })
  console.info('✅  Server-side HMR Enabled!')
}

buffaybu on 10 Jul 2018

👍4 🎉1

Weirddds. I just have it has index.js in our apps.

jaredpalmer on 11 Jul 2018

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.