Storybook: DLL Plugin broke with 2.x

[thebuilder]

I've got a setup that packages libs into a DLL, to speed up rebuilds. It's running in full-control-mode, and was working fine in 1.4.x.

Running in 2.2.0, i'm now getting:

Uncaught ReferenceError: vendor is not defined(anonymous function) 
(anonymous function) @ manager.bundle.js:673

I'm guessing it's caused by Storybook trying to use parts of the same webpack setup? The error is happening before the UI is rendered.

If i remove the DllReferencePlugin, everything works.

webpack.config.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('../../tools/webpack/common.config');
const removeCssUrl = require('../utils/remove-css-url');

// Export a function. Accept the base config as the only param.
module.exports = (storybookBaseConfig, configType) => {
  // Merge config files
  const config = merge.smart(storybookBaseConfig, commonConfig);
  config.plugins.push(
    // Use the DLL in development.
    new webpack.DllReferencePlugin({
      context: process.cwd(),
      manifest: require('local-webpack-dlls/vendor.json'),
    })
  );

  // Return the altered config
  return removeCssUrl(config);
};

The script is loaded in the head.html:

head.html

<script data-dll='true' src='/vendor.dll.js'></script>

[arunoda]

Could you send me a sample repo where I can test this locally. So, we could fix the issue.

[thebuilder]

Hey, i've tried to create a cutdown version of my project, containing just a simple storybook setup:
https://github.com/thebuilder/broken-storybook-dll

Thanks for looking into it.

[arunoda]

@thebuilder I'm looking at this.

[arunoda]

@thebuilder I could able fix it by doing this. Had to add some deps too.
See:

Here are the changes:

diff --git a/.babelrc b/.babelrc
index a39feff..1ee3ad9 100644
--- a/.babelrc
+++ b/.babelrc
@@ -22,4 +22,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 68f090c..e7a6982 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,8 @@
     "lodash": "4.14.1",
     "react": "15.3.0",
     "react-dom": "15.3.0",
+    "react-hot-loader": "^3.0.0-beta.1",
+    "react-router": "^2.6.1",
     "sanitize.css": "4.1.0",
     "whatwg-fetch": "1.0.0"
   },
diff --git a/storybook/webpack.config.js b/storybook/webpack.config.js
index bfecd59..6a0e9cd 100755
--- a/storybook/webpack.config.js
+++ b/storybook/webpack.config.js
@@ -12,11 +12,11 @@ module.exports = (storybookBaseConfig, configType) => {
   config.plugins.push(
     // Use the DLL in development.
     new webpack.DllReferencePlugin({
-      context: process.cwd(),
+      context: __dirname,
       manifest: require('local-webpack-dlls/vendor.json'),
     })
   );

   // Return the altered config
   return removeCssUrl(config);
-};
\ No newline at end of file
+};

[thebuilder]

Cool! Changing context to __dirname fixed it.

Is it running running the Webpack instance in a new process?

[arunoda]

@thebuilder No we don't running it in a new process.
It's just the normal way.