Watch missing NPM modules and force webpack rebuild (#446)

* Add CRA's WatchMissingNodeModulesPlugin to webpack * Fix lint issues.
storybookjs · Sep 14, 2016 · c8a1104 · c8a1104
1 parent 30d379c
commit c8a1104
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 4 deletions.
diff --git a/dist/server/build.js b/dist/server/build.js
diff --git a/dist/server/config/utils.js b/dist/server/config/utils.js
@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.excludePaths = exports.includePaths = exports.OccurenceOrderPlugin = undefined;
+exports.nodeModulesPaths = exports.excludePaths = exports.includePaths = exports.OccurenceOrderPlugin = undefined;
 
 var _webpack = require('webpack');
 
@@ -23,4 +23,6 @@ _webpack2.default.optimize.OccurenceOrderPlugin;
 
 var includePaths = exports.includePaths = [_path2.default.resolve('./')];
 
-var excludePaths = exports.excludePaths = [_path2.default.resolve('./node_modules')];
+var excludePaths = exports.excludePaths = [_path2.default.resolve('./node_modules')];
+
+var nodeModulesPaths = exports.nodeModulesPaths = _path2.default.resolve('./node_modules');
diff --git a/dist/server/config/webpack.config.js b/dist/server/config/webpack.config.js
@@ -16,6 +16,10 @@ var _caseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plu
 
 var _caseSensitivePathsWebpackPlugin2 = _interopRequireDefault(_caseSensitivePathsWebpackPlugin);
 
+var _WatchMissingNodeModulesPlugin = require('./WatchMissingNodeModulesPlugin');
+
+var _WatchMissingNodeModulesPlugin2 = _interopRequireDefault(_WatchMissingNodeModulesPlugin);
+
 var _utils = require('./utils');
 
 var _babel = require('./babel.js');
@@ -35,7 +39,7 @@ var config = {
     filename: 'static/[name].bundle.js',
     publicPath: '/'
   },
-  plugins: [new _utils.OccurenceOrderPlugin(), new _webpack2.default.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin2.default()],
+  plugins: [new _utils.OccurenceOrderPlugin(), new _webpack2.default.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin2.default(), new _WatchMissingNodeModulesPlugin2.default(_utils.nodeModulesPaths)],
   module: {
     loaders: [{
       test: /\.jsx?$/,

diff --git a/src/server/config/WatchMissingNodeModulesPlugin.js b/src/server/config/WatchMissingNodeModulesPlugin.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+// @remove-on-eject-end
+
+// This Webpack plugin ensures `npm install <library>` forces a project rebuild.
+// We’re not sure why this isn't Webpack's default behavior.
+// See https://github.com/facebookincubator/create-react-app/issues/186.
+
+function WatchMissingNodeModulesPlugin(nodeModulesPath) {
+  this.nodeModulesPath = nodeModulesPath;
+}
+
+WatchMissingNodeModulesPlugin.prototype.apply = function (compiler) {
+  compiler.plugin('emit', (compilation, callback) => {
+    const missingDeps = compilation.missingDependencies;
+    const nodeModulesPath = this.nodeModulesPath;
+
+    // If any missing files are expected to appear in node_modules...
+    if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {
+      // ...tell webpack to watch node_modules recursively until they appear.
+      compilation.contextDependencies.push(nodeModulesPath);
+    }
+
+    callback();
+  });
+};
+
+module.exports = WatchMissingNodeModulesPlugin;
diff --git a/src/server/config/utils.js b/src/server/config/utils.js
@@ -14,3 +14,5 @@ export const includePaths = [
 export const excludePaths = [
   path.resolve('./node_modules'),
 ];
+
+export const nodeModulesPaths = path.resolve('./node_modules');
diff --git a/src/server/config/webpack.config.js b/src/server/config/webpack.config.js
@@ -1,7 +1,13 @@
 import path from 'path';
 import webpack from 'webpack';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
-import { OccurenceOrderPlugin, includePaths, excludePaths } from './utils';
+import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
+import {
+  OccurenceOrderPlugin,
+  includePaths,
+  excludePaths,
+  nodeModulesPaths,
+} from './utils';
 import babalLoaderConfig from './babel.js';
 
 const config = {
@@ -26,6 +32,7 @@ const config = {
     new OccurenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new CaseSensitivePathsPlugin(),
+    new WatchMissingNodeModulesPlugin(nodeModulesPaths),
   ],
   module: {
     loaders: [