Search code examples
webpackmomentjswebpack-hmr

Moment.js guess timezone is temporarily loading incorrect timezone

Moment.js guess timezone is temporarily loading UTC then switching to the correct timezone.

I've narrowed it down to what seems to be that webpack is loading the bundle.js file first before moment.tz.guess() gets the correct timezone.

alt text

Look at the loading time, and see how the timezone changes after bundle.js has completed loading.

Any ideas how to resolve this? Kinda out of it today :/

Solution

  • I found it! :D

    So basically since we're using HMR for server and client side rendering, the issue was that it was loading UTC on the server, sending it down as UTC then being overwritten by the client with the correct timezone. All I had to do was something like this.

    const __CLIENT__ = !!global.window

export class Something extends Component {
  state = {
    timezone: /\(([^)]+)\)/.exec(new Date())[1]
  }
  render () {
    return (
      <div>
        {__CLIENT__ && <div>{`Times are being displayed in ${timezone} time.`}</div>
      </div>
    )
  }
}