[[email protected]] Uncaught exception: TypeError: Cannot read property 'size' of undefined

[Ninita1]

Describe the bug

When I run npm run webpack-build the Compilation Results returns: Uncaught exception: TypeError: Cannot read property 'size' of undefined

What is the current behavior?

I'm trying to upgrade webpack 3.3.10 to 4.0.0-beta.2. However when I execute npm run webpack-build my build fails and I get these errors:

Compilation Results

Version: 4.41.6
Built: Invalid Date
Compile Time: undefinedms
Output Directory: C:\Users\my-user\src\my-component\dist/my-component/
Hash: undefined

⬢ webpack: Uncaught exception: TypeError: Cannot read property 'size' of undefined
⬢ webpack: TypeError: Cannot read property 'size' of undefined
at C:\Users\my-user\src\my-component\node_modules\webpack-cli\lib\utils\CompilerOutput.js:40:42

On webpack.js I had this on entry property:

entry: [
     `${APP_DIR}/components/index.js`,
     `${APP_DIR}/styles/fancyStyles.scss`
 ] 

And I already figured out the problem is about the ${APP_DIR}/styles/fancyStyles.scss line.
But how can I solve this?

To Reproduce
Have something like this on webpack.js:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const packageJson = require('../package.json');

const DIST_DIR = path.resolve(__dirname, '../dist/');
const BUILD_DIR = `${DIST_DIR}/my-component/`;
const APP_DIR = path.resolve(__dirname, '../src/');

module.exports = {
  mode: 'production',
  entry: [
    `${APP_DIR}/styles/fancyStyles.scss`
  ],
  bail: true,
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.s?[ac]ss$/i,
        exclude: [/node_modules/],
        use: ExtractTextPlugin.extract({
          fallback: MiniCssExtractPlugin.loader,
          use: [
            'css-loader',
            'resolve-url-loader',
            'sass-loader'
          ],
        }),
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({ // emptys the /dist/ folder
      cleanAfterEveryBuildPatterns: [`${DIST_DIR}`],
      verbose: true
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new ExtractTextPlugin('my-component.css', { allChunks: true }),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /my-component.css$/g,
      cssProcessorOptions: {
        discardComments: { removeAll: true },
        map: { inline: false },
        reduceIdents: false,
        discardUnused: { keyframes: false }
      },
      canPrint: true
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
  ],
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        parallel: true,
        sourceMap: true,
        uglifyOptions: {
          mangle: true,
          keep_fnames: true,
          keep_classnames: true,
          warnings: false,
          ie8: true,
          output: {
            comments: false,
          },
          compress: {
            conditionals: true,
            unused: true,
            comparisons: true,
            sequences: true,
            dead_code: true,
            evaluate: true,
            if_return: true,
            join_vars: true,
            drop_console: true,
            drop_debugger: true
          }
        }
      })
    ]
  },
  output: {
    filename: 'my-component.js',
    path: `${BUILD_DIR}`,
    library: 'my-component',
    libraryTarget: 'commonjs2'
  },
  externals: {
    ...packageJson.dependencies
  }
};

And have the package.json like this:

{
  "name": "my-component",
  "description": "My packaged component",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run storybook-start",
    "test": "npm run lint && jest -u -c ./tools/jest.config.js",
    "build": "npm run webpack-build && npm run storybook-build && npm run babel-build && npm run post-build",
    "storybook-start": "start-storybook -p 9001 -s ./src -c .storybook",
    "storybook-build": "build-storybook -c .storybook -o ./dist/my-component/storybook/",
    "babel-build": "cross-env NODE_ENV=buildES6 babel ./src/components/ --ignore **/stories,**/*.test.js --source-maps --out-dir ./dist/my-component/",
    "lint": "node ./node_modules/eslint/bin/eslint.js ./ --cache --cache-location \"./node_modules/.cache/eslint/\" --quiet",
    "post-build": "node tools/post-build.js",
    "webpack-build": "cross-env BABEL_ENV=commonJS node ./node_modules/webpack/bin/webpack --config ./tools/webpack.js"
  },
  "dependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },
  "devDependencies": {
    "@babel/cli": "7.8.3",
    "@babel/core": "7.8.3",
    "@babel/plugin-proposal-class-properties": "7.8.3",
    "@babel/plugin-transform-runtime": "7.8.3",
    "@babel/preset-env": "7.8.3",
    "@babel/preset-react": "7.8.3",
    "@storybook/addon-docs": "5.3.9",
    "@storybook/react": "5.3.9",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^25.1.0",
    "babel-loader": "^8.0.6",
    "babel-minify": "^0.5.1",
    "babel-plugin-transform-imports": "^2.0.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.0",
    "css-loader": "^3.4.2",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "enzyme-to-json": "^3.4.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.14.3",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "jest": "^25.1.0",
    "jest-html-reporters": "^1.2.1",
    "js-beautify": "^1.10.2",
    "lodash": "^4.17.15",
    "marksy": "^8.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "raw-loader": "^4.0.0",
    "react-addons-create-fragment": "^15.6.2",
    "react-test-renderer": "^16.9.0",
    "resolve-url-loader": "^3.1.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "4.41.6",
    "webpack-cli": "^4.0.0-beta.2"
  }
}

And execute: npm run webpack-build.

Expected behavior
This should bundle all my referred scss code on my-component.css and my-component.css.map.

Screenshots

Compilation Results

Version: 4.41.6
Built: Invalid Date
Compile Time: undefinedms
Output Directory: C:\Users\my-user\src\my-component\dist/my-component/
Hash: undefined

⬢ webpack: Uncaught exception: TypeError: Cannot read property 'size' of undefined
⬢ webpack: TypeError: Cannot read property 'size' of undefined
at C:\Users\my-user\src\my-component\node_modules\webpack-cli\lib\utils\CompilerOutput.js:40:42

[ematipico]

Would you be able to share a minimal repository where we can reproduce the issue? I might know where to look at but having a minimal repo would help a lot! Cheers