Gatsby: How to turn off Hot Module Replacement in Gatsby (v2) development

[redstubble]

Implementing react-pdf with Gatsby v2.
The project requires a pdf.worker.js file from pdfjs-dist/build which is copied to the project's output folder.
The worker generates the error "the window is not defined".

It works fine when deployed.

a) How do I turn off HMR in development mode?
b) How do I begin to troubleshoot window not defined in a worker.js file?

resume.js

import React, { Component } from 'react'
import {
  Grid,
  Container,
  Dimmer,
  Loader,
  Icon,
  Button,
} from 'semantic-ui-react'
import Resume from '../assets/resume.pdf'

const NoDecorationLink = {
  textDecoration: 'none',
  color: 'inherit',
}

class ResumeViewer extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
  }

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages })
  }

  componentDidMount() {
    if (typeof window !== 'undefined') {
      try {
        const reactPdf = require('react-pdf')
        const docPdf = require('react-pdf/dist/entry.webpack')
        this.document = docPdf.Document
        this.page = reactPdf.Page
      } catch (e) {
        console.error(e)
      }
    }

    this.setState({
      elWidth: document.getElementById('pdf-container').clientWidth,
    })
  }

  render() {
    const { pageNumber, numPages } = this.state
    if (
      typeof this.page === 'undefined' ||
      typeof this.document === 'undefined' ||
      !this.state.elWidth
    ) {
      return (
        <Dimmer active>
          <Loader content="Loading" />
        </Dimmer>
      )
    }

    const Page = this.page
    const Document = this.document

    return (
      <Container id="pdf-container">
        <Grid centered style={{ margin: '15px 0' }}>
          <Document
            file={Resume}
            loading={
              <Dimmer active>
                <Loader content="Loading" />
              </Dimmer>
            }
            onLoadSuccess={this.onDocumentLoadSuccess}
          >
            <Page width={this.state.elWidth} pageNumber={pageNumber} />
          </Document>
          {pageNumber} of {numPages}
        </Grid>
        <p style={{textAlign: 'center'}}>
          <Button
            onClick={() => {
              if (pageNumber > 1)
                this.setState({
                  pageNumber: pageNumber - 1,
                })
            }}
            labelPosition="left"
            icon
          >
            Last
            <Icon name="left arrow" />
          </Button>
          <Button
            onClick={() => {
              if (pageNumber < numPages)
                this.setState({
                  pageNumber: pageNumber + 1,
                })
            }}
            icon
            labelPosition="right"
          >
            Next
            <Icon name="right arrow" />
          </Button>
        </p>
        <p style={{textAlign: 'center'}}>
          <a style={NoDecorationLink} href={Resume} download="resume.pdf">
            <Button icon>
              <Icon name="download" />
            </Button>
          </a>
        </p>
        <div style={{ height: '10px' }} />
      </Container>
    )
  }
}

export default ResumeViewer

[KyleAMathews]

How are you adding it to your site?

[redstubble]

Hi Kyle, thanks for your great work on Gatsby. I have amended my post to include how it is being added to the site.

[wardpeet]

@redstubble might sharing a Repository? I think the issue lies with how you require react-pdf.

[andrewbranch]

1. @redstubble I can solve your problem without disabling HMR:

// gatsby-node.js
exports.onCreateWebpackConfig = ({ getConfig, actions }) => {
  const oldConfig = getConfig();
  const config = {
    ...oldConfig,
    output: {
      ...oldConfig.output,
      globalObject: 'this'
    }
  };

  actions.replaceWebpackConfig(config);
}

(source: https://github.com/webpack/webpack/issues/6642#issuecomment-371087342)

1. It would still be nice to be able to disable HMR, so I would request to keep this issue open as a feature request.

Cheers!

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[minimit]

Cannot find a way to disable HMR :(

[lucas-janon]

I had to disable HMR on a specific Gatsby page (and all its components), here's what worked for me:

./pages/no-hmr-page.tsx

if (module.hot) {
  module.hot.addStatusHandler(status => {
    if (status === "apply") window.location.reload();
  });
}

[webjay]

I made myself a hook for that:

/* global document */

import { useEffect } from 'react';

function hotReload() {
  if (module.hot === undefined) return;
  module.hot.addStatusHandler((status) => {
    if (status === 'apply') document.location.reload();
  });
}

function useHotReload() {
  useEffect(hotReload, []);
}

export default useHotReload;