Error: No module factory available for dependency type: CssDependency

[dep]

Describe the bug
When running start-storybook -p 6006 I receive the following error:

$ start-storybook -p 6006
info @storybook/react v5.2.4
info
info => Loading presets
info => Loading presets
info => Loading custom addons config.
info => Loading custom Webpack config (full-control mode).
info => Using base config because react-scripts is not installed.
Starting type checking service...
Using 1 worker with 2048MB memory limit
70% building 165/176 modules 11 active ...b/node_modules/source-map-loader/index.js!/Users/dpeck/invoca/web/node_modules/@storybook/addon-docs/dist/blocks/Props.js✖ ｢wdm｣: Error: No module factory available for dependency type: CssDependency
    at addDependency (/Users/dpeck/invoca/web/node_modules/webpack/lib/Compilation.js:800:12)
    at iterationOfArrayCallback (/Users/dpeck/invoca/web/node_modules/webpack/lib/Compilation.js:208:3)
    at addDependenciesBlock (/Users/dpeck/invoca/web/node_modules/webpack/lib/Compilation.js:816:5)
    at Compilation.processModuleDependencies (/Users/dpeck/invoca/web/node_modules/webpack/lib/Compilation.js:827:4)
    at afterBuild (/Users/dpeck/invoca/web/node_modules/webpack/lib/Compilation.js:954:15)
    at /Users/dpeck/invoca/web/node_modules/webpack/lib/Compilation.js:998:11
    at callback (/Users/dpeck/invoca/web/node_modules/webpack/lib/Compilation.js:734:5)
    at /Users/dpeck/invoca/web/node_modules/webpack/lib/Compilation.js:782:12
    at handleParseResult (/Users/dpeck/invoca/web/node_modules/webpack/lib/NormalModule.js:478:12)
    at /Users/dpeck/invoca/web/node_modules/webpack/lib/NormalModule.js:500:6
    at /Users/dpeck/invoca/web/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/dpeck/invoca/web/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/dpeck/invoca/web/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at /Users/dpeck/invoca/web/node_modules/loader-runner/lib/LoaderRunner.js:186:6
    at context.callback (/Users/dpeck/invoca/web/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/dpeck/invoca/web/node_modules/@rails/webpacker/node_modules/mini-css-extract-plugin/dist/loader.js:198:12
/Users/dpeck/invoca/web/node_modules/neo-async/async.js:16
    throw new Error('Callback was already called.');
    ^

Error: Callback was already called.
    at throwError (/Users/dpeck/invoca/web/node_modules/neo-async/async.js:16:11)
    at /Users/dpeck/invoca/web/node_modules/neo-async/async.js:2818:7
    at processTicksAndRejections (internal/process/task_queues.js:79:11)

To Reproduce
presets.js

module.exports = [
  '@storybook/preset-typescript',
  '@storybook/addon-docs/react/preset'
];

storybook/webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isBabelRule = (rule) =>
  rule.test &&
    rule.test.toString() === "/\\.(js|jsx|mjs)?(\\.erb)?$/" &&
    rule.use[0] &&
    rule.use[0].loader === "babel-loader";

const findBabelLoaderRule = (config) =>
  config.module.rules.find((rule) => isBabelRule(rule));

const findMdxLoaderRule = (config) =>
  config.module.rules.find((rule) =>
    rule.test.toString() === "/\\.(stories|story).mdx$/" && rule.use[1].loader === "@mdx-js/loader"
  );

// Create rule for processing mdx files. Use our babel rule and Storybook's mdx rule
const createMdxRule = (babelLoaderRule, mdxLoaderRule) => (
  {
    // use everything from our babel rule
    ...babelLoaderRule,

    // target only mdx files
    test: mdxLoaderRule.test,

    use: [
      // the first use is our config of the babel-loader
      babelLoaderRule.use[0],

      // the @mdx-js/loader from Storybook's config.
      mdxLoaderRule.use[1]
    ]
  }
);

const isCSSRule = (rule) =>
  rule.test &&
  (
    rule.test.toString() === "/\\.(css)$/i" ||
    rule.test.toString() === "/\\.(scss|sass)$/i"
  ) &&
  rule.use[0] === MiniCssExtractPlugin.loader;

const styleLoader = {
  loader: 'style-loader',
  options: {
    hmr: true,
    sourceMap: true
  }
};

const replaceCSSRule = (rule) =>
  ({
    ...rule,

    use: [
      styleLoader,
      ...rule.use.slice(1)
    ]
  });

const replaceExtractCSSRules = (appRules) =>
  appRules.map((rule) => isCSSRule(rule) ? replaceCSSRule(rule) : rule);

function createConfig(config, origAppConfig) {
  const { devServer, ...appConfig } = origAppConfig;

  const mdxLoaderRule = findMdxLoaderRule(config);
  const babelLoaderRule = findBabelLoaderRule(origAppConfig);

  return {
    ...appConfig,
    ...config,

    devtool: appConfig.devtool,

    module: {
      ...config.module,

      rules: [
        ...replaceExtractCSSRules(appConfig.module.rules),

        // append custom mdx rule for handling mdx files
        createMdxRule(babelLoaderRule, mdxLoaderRule)
      ]
    },

    resolve: appConfig.resolve
  };
}

module.exports = async ({ config, mode }) => {
  const env = mode.toLowerCase();

  if (env === "development") {
    const appConfig = require('../config/webpack/development');
    return createConfig(config, appConfig);
  } else if (env === "production") {
    const appConfig = require('../config/webpack/production');
    return createConfig(config, appConfig);
  }
};

System

  System:
    OS: macOS 12.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.22.7 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.14.15 - /usr/local/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 88.0
    Safari: 15.4
  npmPackages:
    @storybook/addon-a11y: 5.2.4 => 5.2.4
    @storybook/addon-actions: 5.2.4 => 5.2.4
    @storybook/addon-docs: 5.2.4 => 5.2.4
    @storybook/addon-knobs: 5.2.4 => 5.2.4
    @storybook/addon-links: 5.2.4 => 5.2.4
    @storybook/addon-storyshots: 5.2.4 => 5.2.4
    @storybook/addons: 5.2.4 => 5.2.4
    @storybook/preset-typescript: ^1.1.0 => 1.2.2
    @storybook/react: 5.2.4 => 5.2.4

Additional context
I just updated to Node 12. Was working fine on Node 10.

[hislopzach]

I was encountering this issue because I (unknowingly) had two versions of mini-css-extract-plugin (one was in the node_modules of @rails/webpacker)

I was able to identify this by running npm ls mini-css-extract-plugin.

Once Identified, I was able to resolve the issue by using the resolutions field in my package.json to ensure only one version is used

// ... rest of package.json
"resolutions" : {
 // ... other resolutions
"mini-css-extract-plugin": "0.8.0"
}

[avinmaster]

Check your path's case in the shell. It should be precisely the same as real folder names.