React Storybook с ошибкой Webpack - сборка модуля завершилась ошибкой: ошибка типа: невозможно прочитать свойство thisCompilation из неопределенного - PullRequest
Новая
       8

React Storybook с ошибкой Webpack - сборка модуля завершилась ошибкой: ошибка типа: невозможно прочитать свойство thisCompilation из неопределенного

0 голосов
/ 09 сентября 2018

Я получаю эту ошибку при попытке запустить storybook с Webpack@4.17.2 и mini-css-extract-plugin. Я использую mini-css-extract-plugin вместо extract-text-webpack-plugin, поскольку он не поддерживает Webpack > 4.x.x

Любые идеи, как решить эту проблему без перехода на веб-пакет <4.x.x Ошибка: </p> 

    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)

Содержимое пакета json: 

{
  "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: 

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']
      }
    ]
  }
};

1 Ответ

0 голосов
/ 05 декабря 2018

Я думаю, что короткий комментарий был затронут SamVK в комментариях. Как говорится в выпуске Storybook, предстоит сделать работу, чтобы сделать Storybook Webpack 4 совместимым. Есть некоторые обходные пути, но ваш пробег может отличаться.

Ваша лучшая ставка на декабрь 2018 года - убедиться, что вы используете последнюю версию Webpack 4.x, Storybook 4.x и убедитесь, что вы включили правильную версию babel core и babel loader, основанную на других вещах. Вы включили.

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

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

...