React Storybook with Webpack Error - Module build failed: TypeError: Cannot read property 'thisCompilation' of undefined

Question

I am getting this error while trying to start the storybook with Webpack@4.17.2 and mini-css-extract-plugin . I am using mini-css-extract-plugin instead of extract-text-webpack-plugin since it is not supporting Webpack > 4.xx

Any Ideas how to resolve this issue without downgrading to webpack < 4.xx Error:

    ERROR in ./src/styles/styles.less
Module build failed: TypeError: Cannot read property 'thisCompilation' of undefined
    at NodeTemplatePlugin.apply (C:\Users\sbr\Documents\Github\my-app\node_modules\webpack\lib\node\NodeTemplatePlugin.js:19:18)
    at Object.pitch (C:\Users\sbr\Documents\Github\my-app\node_modules\mini-css-extract-plugin\dist\loader.js:79:51)

package json contents:

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "my app",
  "main": "app.js",
  "repository": "https://github.com",
  "author": "sbr",
  "license": "MIT",
  "private": false,
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack -p",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "moment": "^2.22.2",
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.4.10",
    "@storybook/addon-links": "^3.4.10",
    "@storybook/addons": "^3.4.10",
    "@storybook/react": "^3.4.10",
    "babel-core": "^6.26.3",
    "babel-loader": "7",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.2",
    "path": "^0.12.7",
    "style-loader": "^0.23.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  }
}

Storybook webpack.config contents:

const ExtractTextPlugin = require('mini-css-extract-plugin');
const extractTextPlugin = new ExtractTextPlugin('src/styles/styles.less');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }, {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /\.less$/,
        use: [ExtractTextPlugin.loader, 'css-loader','less-loader']
      }
    ]
  }
};

Answer 1

I think the short answer was touched on by SamVK in the comments. As the Storybook issue states, there was work to be done to make storybook Webpack 4 compatible. There are some workarounds, but your mileage may vary.

Your best bet as of Dec 2018 is to make sure you're on the latest version of Webpack 4.x, Storybook 4.x and make sure you include the correct version of babel core and babel loader based on the other things you've included.

https://github.com/storybooks/storybook/issues/3044

https://github.com/storybooks/storybook/pull/3148