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 [email protected] 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.x.x

Any Ideas how to resolve this issue without downgrading to webpack < 4.x.x 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']
      }
    ]
  }
};

Looks like it might only be supported in the 4.0 alpha release of storybook? github.com/storybooks/storybook/issues/3044 — SamVK
– SamVK, Commented Sep 9, 2018 at 1:21

Snekse · Accepted Answer · 2018-12-05 19:35:43Z

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

answered Dec 5, 2018 at 19:35

Snekse

15.8k11 gold badges64 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related