extract-text-webpack-plugin with webpack 2

[jhicken]

So I am using webpack 2.1.0-beta.21 and storybook 2.3.0 and extract-text-webpack-plugin 2.0.0-beta.3. In full control mode. When I have new ExtractTextPlugin('styles.css') defined things explode.

/node_modules/extract-text-webpack-plugin/index.js:245
var shouldExtract = !!(options.allChunks || chunk.isInitial());

if i use extract-text-webpack-plugin 1.0.1 I get this.
/node_modules/webpack/lib/Chunk.js:37
throw new Error("Chunk.entry was removed. Use hasRuntime()");

This seems to only be a problem with storybook. It work just fine when running my regular webpack build.

[arunoda]

We are not using this plugin and I hope people use Webpack2 with Storybook without any issues.

[jhicken]

@arunoda I know storybook is not using this plugin but my project does. Therefore storybook breaks when I am trying to have it compile my styles from my project.

This is important because my external style file must exist for my story's to display properly.

Simply removing the plugin from storybook #369 does not solve the problem if I need the plugin for my project.

If your not going to fix it what would your recommendation be?

[arunoda]

That's pretty weird. We don't automatically load it.
That seems like you are importing existing config which import this module.
May be try to avoid loading that module when using your config for Storybook.

[arunoda]

Anyway, we need to find the root cause for this issue.

[derpoho]

Is there any updates on this. We are getting:

Unhandled rejection TypeError: Cannot read property 'length' of undefined
    at Chunk.isInitial (***/webpack/lib/Chunk.js:57:25)
    at ExtractTextPlugin.<anonymous> (***/extract-text-webpack-plugin/index.js:281:24)
    at Array.forEach (native)
    at ExtractTextPlugin.<anonymous> (***/extract-text-webpack-plugin/index.js:280:21)

with
"webpack": "2.1.0-beta.27",
"extract-text-webpack-plugin": "2.0.0-beta.4",
"getstorybook": "^1.6.1",

Any fix available?

[erikthedeveloper]

I am also running into exactly this while upgrading to Webpack 2.x. I'm running into what seem to be the same errors @jhicken mentions above. Have you come across any solution to this?

As far as I can tell, this is related to the ExtractTextWebpackPlugin breaking changes (see: https://webpack.js.org/guides/migrating/#extracttextwebpackplugin-breaking-change) and Storybook supporting Webpack 2.x (related: Move webpack to peer dependencies #556)

@arunoda can you confirm if this is expected?

Attempting to use Webpack 2.x specific plugins/loaders via the "Simple Mode" will break until Move webpack to peer dependencies #556 is resolved"

---

We've been successfully using Storybook + Webpack v1.x following the "Simple Mode" to enable ExtractTextPlugin plugin and loader for css-loader, sass-loader as described here: https://getstorybook.io/docs/react-storybook/configurations/custom-webpack-config

Our Webpack 2.x upgrade has gone smoothly according to Webpack's v1 to v2 Guide with the exception of our Storybook now being out of commission until we figure this out.

Relevant versions:

// package.json
{
  // ...
  devDependencies: {
    // ...
    "@kadira/storybook": "^2.5.2",
    "extract-text-webpack-plugin": "2.0.0-beta.4",
    "webpack": "2.2.0-rc.3",
  }
}

In the meantime, I'll continue exploring and see if I can come up with a solution or more details.

[erikthedeveloper]

I did get this resolved for my project. The solution ended up being to not use ExtractTextWebpackPlugin for Storybook at all. @jhicken I was not able to get extract-text-webpack-plugin@2.x working alongside Webpack 1.x as I originally hoped, but I think it turned out better in the end. I recommend seeing if you can go without it. In retrospect, I realize I really didn't need it and this ended up simplifying my Storybook-related config.

Here is my full .storybook/webpack.config.js

const {
  styleLoader,
  fontLoader,
} = require('../webpack/pieces');

/**
 * See: https://getstorybook.io/docs/react-storybook/configurations/custom-webpack-config
 */
module.exports = function(storybookConfig) {
  // Set an absolute public path. Required for reasons of JS-imported styles
  // See: http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809
  Object.assign(storybookConfig.output, {
    publicPath: 'http://localhost:6006/',
  });

  // Enable JS-imported styles/fonts
  storybookConfig.module.loaders.push(
    styleLoader,
    fontLoader
  );

  return storybookConfig;
};

For more context, I recommend reading these related comments I left throughout my journey. Related to upgrading Webpack 2.x and it playing nicely w/ Storybook.

• Webpack 2 config not working loading modules. #646 (comment)
• Font-face not loading properly #324 (comment)

[joscha]

references #637

[ndelangen]

So this is for subscribers on this issue: Here's my progress:
I'm in the process of creating a monorepo that will hold all storybook repos as project. This will make maintenance and testing a lot better and easier.

I've done all the work to support webpack 2 on here.
https://github.com/storybooks/mono/blob/master/packages/react-storybook/package.json#L61

I'll keep you all updated on the progress! Thank you all!

So don't feel bad or like this isn't going to happen, because it's going to happen SOON!
I'm closing this issue because I'm doing them all in 1 swoop and will be fixed then.

[joscha]

This issue has been fixed in 3.1.7 via #1363 - extract-text-webpack-plugin can now be used again in a standard storybook build.