Storybook: Webpack 4 HMR not rebuilding node_modules

Created on 13 Feb 2019 · 13Comments · Source: storybookjs/storybook

If you are reporting a bug or requesting support, start here:

Bug or support request summary

I just upgraded @storybook/react to 4.1.11 and webpack to 4.29.0

Using start-storybook with custom webpack config.

When modifying a file in node_modules/, webpack should rebuild the files so the changes should be seen thanks to HMR.

Problem : Webpack isn't even rebuilding.

Steps to reproduce

With a custom webpack config, start-storybook and modify a used node_modules/ file.

Please specify which version of Storybook and optionally any affected addons that you're running

@storybook/react 4.1.11
@storybook/addon-actions 4.1.11
@storybook/addon-knobs 4.1.11
@storybook/addon-options 4.1.11

Screenshots / Screencast / Code Snippets (Optional)

The custom Webpack config

export default (storybookBaseConfig, configType, defaultConfig) => {
  const __DEV__ = configType === 'DEVELOPMENT'

  storybookBaseConfig.resolve.modules = [
    paths.fromSrc(),
    ...(__DEV__ ? [paths.fromBase('node_modules')] : []), // Necessary for linked modules
    'node_modules'
  ]
  storybookBaseConfig.resolve.extensions = webpackConfigClient.resolve.extensions
  storybookBaseConfig.resolve.alias = {
    ...storybookBaseConfig.resolve.alias,
    ...webpackConfigClient.resolve.alias
  }
  storybookBaseConfig.resolve.symlinks = !__DEV__ // for linked modules (no-babel) https://github.com/webpack/webpack/issues/1866#issuecomment-284571531
  storybookBaseConfig.plugins.push(
    new webpack.DefinePlugin({
      ...config.clientGlobals,
      __PROJECT_VERSION__: JSON.stringify(packageJson.version)
    })
  )
  // JS / JSX
  storybookBaseConfig.module.rules.push({
    test: /\.(js|jsx)$/,
    include: [
      paths.fromSrc(),
      paths.fromConfig(),
      /node_modules[\\/]aw-.+/,
      /node_modules[\\/]wa-.+/,
    ],
    use: [{
      loader: 'babel-loader',
      options: BABEL_CONFIG_BROWSER
    }]
  })

  // STYLES
  const sassLoader = {
    loader: 'sass-loader',
    options: {
      includePaths: [
        paths.fromBase('node_modules', 'aw-ui-styles', 'styles')
      ]
    }
  }

  // Add any packge names here whose styles need to be treated as CSS modules.
  // These paths will be combined into a single regex.
  const PATHS_TO_TREAT_AS_CSS_MODULES = [
    'aw-ui',
    'aw-ui-styles'
  ]

  // If config has CSS modules enabled, treat this project's styles as CSS modules.
  if (config.compiler_css_modules) {
    PATHS_TO_TREAT_AS_CSS_MODULES.push(paths.fromBase(PATHS_CONFIG.DIR_CLIENT))
  }

  const isUsingCSSModules = !!PATHS_TO_TREAT_AS_CSS_MODULES.length
  const cssModulesRegex = new RegExp(
    `(${PATHS_TO_TREAT_AS_CSS_MODULES
      .map((item) => escapeRegexString(item + path.sep))
      .join('|')})`
  )

  // Loaders for styles that need to be treated as CSS modules.
  if (isUsingCSSModules) {
    const cssModulesLoader = {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1,
        localIdentName: '[name]__[local]___[hash:base64:5]'
      }
    }

    storybookBaseConfig.module.rules.push({
      test: /\.scss$/,
      include: cssModulesRegex,
      use: [
        'style-loader',
        cssModulesLoader,
        sassLoader
      ],
    })

    storybookBaseConfig.module.rules.push({
      test: /\.css$/,
      include: cssModulesRegex,
      use: [
        'style-loader',
        cssModulesLoader,
      ],
    })
  }

  // Loaders for files that should not be treated as CSS modules.
  const excludeCSSModules = isUsingCSSModules
    ? cssModulesRegex
    : []

  storybookBaseConfig.module.rules.push({
    test: /\.scss$/,
    exclude: excludeCSSModules,
    use: [
      'style-loader',
      'css-loader',
      sassLoader,
    ],
  })

  storybookBaseConfig.module.rules.push({
    test: /\.css$/,
    exclude: excludeCSSModules,
    use: [
      'style-loader',
      'css-loader',
    ],
  })

  // ------------------------------------
  // Fonts
  // ------------------------------------
  ;[
    ['woff', 'application/font-woff'],
    ['woff2', 'application/font-woff2'],
    ['otf', 'font/opentype'],
    ['ttf', 'application/octet-stream'],
    ['eot', 'application/vnd.ms-fontobject'],
  ].forEach((font) => {
    const extension = font[0]
    const mimetype = font[1]

    storybookBaseConfig.module.rules.push({
      test: new RegExp(`\\.${extension}$`),
      use: {
        loader: 'url-loader',
        options: {
          name: 'fonts/[name].[ext]',
          limit: 10000,
          mimetype
        }
      }
    })
  })

  // ------------------------------------
  // SVG Sprite loader
  // ------------------------------------
  storybookBaseConfig.module.rules.push({
    test: /\.svg/,
    use: {
      loader: 'svg-sprite-loader'
    }
  })

  return storybookBaseConfig
}

The webpackConfigClient is the webpack config used to compile the client application.
I can paste it here if you think it is relevant.

babel / webpack inactive

Source

rgranger

👍1

Most helpful comment

@rgranger @mrmckeb

I managed to get HMR working by implementing the following into my webpack configuration:

module.exports = {
  watchOptions: {
    ignored: [
      /node_modules([\\]+|\/)+(?!my-package-name)/
    ]
  }
}

This essentially ignores everything except anything inside my-package-name.

That said, this did use to work out of the box.

ellioseven on 20 Feb 2019

👍4 🎉1

All 13 comments

Hi @rgranger, which versions were you previously on? I can take a look to see what might have affected this.

mrmckeb on 15 Feb 2019

Previously, I was on :

@storybook/react 3.2.12 (and same for the addons)
webpack 3.5.5

Thanks for looking this up

rgranger on 15 Feb 2019

@rgranger @mrmckeb

I managed to get HMR working by implementing the following into my webpack configuration:

module.exports = {
  watchOptions: {
    ignored: [
      /node_modules([\\]+|\/)+(?!my-package-name)/
    ]
  }
}

This essentially ignores everything except anything inside my-package-name.

That said, this did use to work out of the box.

ellioseven on 20 Feb 2019

👍4 🎉1

I think i found the culprit : https://github.com/storybooks/storybook/blob/1dfb31f9b35c4ce099b30040a92aafdfedbe421a/lib/core/src/server/dev-server.js#L96

Is there any reason for not watching /node_modules/ by default ?

I have always been watching all the files in my projects (including node_modules), and I never have encountered any performance issue.

My biggest project is around 50 MB large (including sourcemaps).

For now I'm resolving the issue by doing this :

export default (storybookConfig, configType) => {
  ...

  storybookBaseConfig.watchOptions = {
    ignored: false, // Patch for issue https://github.com/storybooks/storybook/issues/5572
  }

  ...
  return storybookBaseConfig
}

Which just removes the default ignoring behavior

rgranger on 20 Feb 2019

I am also facing this problem.. I downgraded to the version 3.2.12 to test and it is working with the old version

chrisokamoto on 4 Mar 2019

As I mentioned above, I think the culprit is this line that should be removed : https://github.com/storybooks/storybook/blob/1dfb31f9b35c4ce099b30040a92aafdfedbe421a/lib/core/src/server/dev-server.js#L96

Unfortunately, I dont' have enough time currently to send a PR

rgranger on 4 Mar 2019

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 25 Mar 2019

I found some time to create a PR : https://github.com/storybooks/storybook/pull/6265

Unfortunately, no time to test it yet.

rgranger on 25 Mar 2019

stale[bot] on 16 Apr 2019

stale[bot] on 7 May 2019

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 6 Jun 2019

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-alpha.36 containing PR #6265 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

shilman on 5 Jul 2019

It appears #6265 got reverted in https://github.com/storybookjs/storybook/pull/8657, and the previous workarounds suggested (https://github.com/storybookjs/storybook/issues/5572#issuecomment-465506042, https://github.com/storybookjs/storybook/issues/5572#issuecomment-465441095) no longer work on 6.0.0-alpha.28.

This is an issue for users with monorepo (lerna) setups who have their components in one subpackage, and storybook in another. You want to reload the components in the other package for a quality development experience.