Using exiting webpack config but still has default plugin CaseSensativePlugin

[SimonCheung1989]

Hi,
I use storybook in my project, and i reused our project's webpack config like below pic

require('babel-register');
let WarnCaseSensitiveModulesPlugin = require('webpack/lib/WarnCaseSensitiveModulesPlugin');
WarnCaseSensitiveModulesPlugin.prototype.apply = function () {};
let mainWebpackConfig = require('../webpack/webpack.storybook.config').default;
module.exports = mainWebpackConfig;

but when i run yarn storybook, it shows below error message

Module not found: Error: [CaseSensitivePathsPlugin] C:\Users`

and i checked your default config under node_modules@kadira\storybook\dist\server\config\webpack.config.js

plugins: [new _webpack2.default.DefinePlugin((0, _utils.loadEnv)()), new _utils.OccurenceOrderPlugin(), new _webpack2.default.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin2.default(), new _WatchMissingNodeModulesPlugin2.default(_utils.nodeModulesPaths)],

i want to know why i used custom webpack config, it still use the default plugin?

[SimonCheung1989]

by the way: how could i reuse our project's webpack config, and remove the default plugin?

[danielduan]

You can use your own config by putting it inside the /.storybook config folder as webpack.config.js.

I would recommend against it since you will be missing the entry points, outputs, and a few other things that make storybook work.

The best way to go about it is to use the "full control mode" in the docs and import the configs from @storybook/react/dist/server/config/webpack.config.js and add the configs you need on top of it.

[SimonCheung1989]

thank for your reply
yes, i had put webpack.config.js inside /.storybook folder, and the config is fine, but it still use the default plugins, i don't want to use CaseSensitivePathsPlugin,

[ndelangen]

When in full-control mode you can remove the plugin you don't want, Can you post your custom webpack.config.js?

[SimonCheung1989]

// you can use this file to add your custom webpack plugins, loaders and anything you like.
// This is just the basic way to add addional webpack configurations.
// For more information refer the docs: https://getstorybook.io/docs/configurations/custom-webpack-config

// IMPORTANT
// When you add this file, we won't add the default configurations which is similar
// to "React Create App". This only has babel loader to load JavaScript.

// module.exports = {
//   plugins: [
//     // your custom plugins
//   ],
//   module: {
//     loaders: [
//       // add your custom loaders.
//     ],
//   },
// };
require('babel-register');
let mainWebpackConfig = require('../webpack/webpack.storybook.config').default;

console.log(JSON.stringify(mainWebpackConfig));
module.exports = mainWebpackConfig;

This is my custom webpack.config.js, so i think storybook won't use default webpack.config.js anymore when i config my custom webpack.config.js, is this right? but seems it still use the default config CaseSensitivePathsPlugin,

[SimonCheung1989]

// you can use this file to add your custom webpack plugins, loaders and anything you like.
// This is just the basic way to add addional webpack configurations.
// For more information refer the docs: https://getstorybook.io/docs/configurations/custom-webpack-config

// IMPORTANT
// When you add this file, we won't add the default configurations which is similar
// to "React Create App". This only has babel loader to load JavaScript.

// module.exports = {
//   plugins: [
//     // your custom plugins
//   ],
//   module: {
//     loaders: [
//       // add your custom loaders.
//     ],
//   },
// };
require('babel-register');
let mainWebpackConfig = require('../webpack/webpack.storybook.config').default;

console.log(JSON.stringify(mainWebpackConfig));
// module.exports = mainWebpackConfig;

// Export a function. Accept the base config as the only param.
module.exports = function(storybookBaseConfig, configType) {
  // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  storybookBaseConfig.module.loaders = mainWebpackConfig.module.loaders;
  storybookBaseConfig.plugins = mainWebpackConfig.plugins;
  storybookBaseConfig.resolve = mainWebpackConfig.resolve;
  // Return the altered config
  return storybookBaseConfig;
};

Thank you everyone, i had resolve this problem by use full-controll mode, it's my mistake that i thought when i wrote my custom webpack.config.js it will cover the default config. Actually it's not.

[danielduan]

sounds good! I'm going to close this issue then.