Storybook: Custom webpack plugin config not being loaded by Storybook

[khaliu]

Support request summary

I'm having an issue when trying to add a plugin like https://github.com/shaketbaby/directory-named-webpack-plugin, where it should be added as a config.resolve.plugin.

If I'm not mistaken, while looking at the code I saw that particulary configuration part isn't taken into account for the merged webpack config.

Steps to reproduce

• Add custom webpack config file with Directory Named Webpack which requires to be in resolve section.
• Storybook fails to load the Directory Plugin.

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

• @storybook/react 3.4.3
• directory-named-webpack-plugin 4.0.0

Screenshots / Screencast / Code Snippets (Optional)

    resolve: {
      plugins: [
        new DirectoryNamedWebpackPlugin(),
      ],
    },

[ndelangen]

Try full control mode:
https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode

[khaliu]

On full control mode the plugin is created but it fails (Inside my webpack config works fine), the log here:

C:\...\node_modules\directory-named-webpack-plugin\index.js:23
  var target = resolver.ensureHook("undescribed-raw-file");
                        ^

TypeError: resolver.ensureHook is not a function
    at module.exports.doApply (C:\...\node_modules\directory-named-webpack-plugin\index.js:23:25)
    at Resolver.apply (C:\...\node_modules\@storybook\core\node_modules\tapable\lib\Tapable.js:375:16)
    at C:\...\node_modules\@storybook\core\node_modules\enhanced-resolve\lib\ResolverFactory.js:249:12
    at Array.forEach (<anonymous>)
    at Object.exports.createResolver (C:\...\node_modules\@storybook\core\node_modules\enhanced-resolve\lib\ResolverFactory.js:248:10)
    at WebpackOptionsApply.process (C:\...\node_modules\@storybook\core\node_modules\webpack\lib\WebpackOptionsApply.js:283:47)
    at webpack (C:\...\node_modules\@storybook\core\node_modules\webpack\lib\webpack.js:37:48)
    at exports.default (C:\...\node_modules\@storybook\core\dist\server\middleware.js:29:40)
    at buildDev (C:\...\node_modules\@storybook\core\dist\server\build-dev.js:163:36)
    at Object.<anonymous> (C:\...\node_modules\@storybook\react\dist\server\index.js:23:22)

[khaliu]

directory-named-webpack-plugin 4 is only compatible with Webpack 4.

Storybook uses webpack 3, and it breaks for that reason.

My solution was to install directory-named-webpack-plugin 2 for Storybook build only with Yarn alias while keeping my Webpack 4 config with DNWP 4, and works well.

[ndelangen]

Storybook 4.0.0 will be use webpack 4. There's an alpha you can try right now.

The full release should happen next month.

[codeaid]

Storybook 4.0.0 will be use webpack 4. There's an alpha you can try right now.

The full release should happen next month.

Is there any update on when Webpack 4 support will be released? Your comment said next month but it's been almost 5 months now and it's still alpha.

[ndelangen]

@codeaid You're right, the update is we're aiming to release it next week.

Sorry my optimism got the better of me.