Storybook: How to disable HMR?

Created on 23 Feb 2018 · 6Comments · Source: storybookjs/storybook

There are cases, when I want to disable HMR, e.g. because the HMR request makes it harder to debug a timing problem or because I want to visually compare a design change. But I did not find a documentation on how to disable HMR with storybook. I tried to provide a webpack config that should do the job (containing the following snippet), but that also did not do the job

module.exports = {
  devServer: {
    inline: false,
    hotOnly: true,
    hot: false,
  },
};

babel / webpack has workaround inactive question / support

Source

datenreisender

👍3

Most helpful comment

For posterity: As of June 21 2019, all that was required to turn off HMR was removing the webpack-hot-middleware entry, there was no plugin being used called HotModuleReplacementPlugin.

// webpack.config.js
require('dotenv').config()

module.exports = async ({ config }) => {
  //ability to turn off HMR with an envar
  if (process.env.DISABLE_HMR === 'true') {
    config.entry = config.entry.filter(singleEntry => !singleEntry.includes('/webpack-hot-middleware/'))
  }

  return config
}

joeycozza on 21 Jun 2019

👍8

All 6 comments

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] on 24 Mar 2018

Lacking a better solution, I now create a static app, when I temporarily want to use Storybook without HMR.

datenreisender on 27 Mar 2018

😕1

stale[bot] on 18 Apr 2018

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

stale[bot] on 18 May 2018

I was able to disable the HMR using an env var by tinkering with the webpack config, here is an example (it uses ramda to manipulate the config, but it is not a requirement):

// webpack.config.js

const always = require('ramda/src/always');
const complement = require('ramda/src/complement');
const contains = require('ramda/src/contains');
const evolve = require('ramda/src/evolve');
const filter = require('ramda/src/filter');
const when = require('ramda/src/when');
const { createDefaultWebpackConfig } = require('@storybook/core/server');

const hotReloadDisabled = process.env.STORYBOOK_HMR_DISABLED === 'true';

module.exports = (baseConfig, configType) => when(
    always(configType !== 'PRODUCTION' && hotReloadDisabled),
    evolve({
        entry: {
            preview: filter(complement(contains('webpack-hot-middleware'))),
        },
        plugins: filter(plugin => plugin.constructor.name !== 'HotModuleReplacementPlugin'),
    }),
    createDefaultWebpackConfig(baseConfig),
);

Basically to disable HMR you need to remove the HotModuleReplacementPlugin which is added by default, and remove also the client component, which is included in the preview entrypoint. Getting rid of both solves the problem.

demerzel3 on 23 May 2018

👍5 😕1

For posterity: As of June 21 2019, all that was required to turn off HMR was removing the webpack-hot-middleware entry, there was no plugin being used called HotModuleReplacementPlugin.

// webpack.config.js
require('dotenv').config()

module.exports = async ({ config }) => {
  //ability to turn off HMR with an envar
  if (process.env.DISABLE_HMR === 'true') {
    config.entry = config.entry.filter(singleEntry => !singleEntry.includes('/webpack-hot-middleware/'))
  }

  return config
}

joeycozza on 21 Jun 2019

👍8

Was this page helpful?

0 / 5 - 0 ratings