Webpack 4 HMR not rebuilding node_modules

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.

[petermikitsh]

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.

[ellioseven]

@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.