Error in Webpack 3.1.1.0

[samrod]

node_modules/webpack/lib/Stats.js:273
                                        size: compilation.assets[asset].size(),
                                                                        ^
TypeError: compilation.assets[asset].size is not a function
    at obj.assets.compilationAssets.map.asset (node_modules/webpack/lib/Stats.js:273:38)
    at Array.map (<anonymous>)
    at Stats.toJson (node_modules/webpack/lib/Stats.js:270:35)
    at Proxy.<anonymous> (node_modules/webpack-visualizer-plugin/lib/plugin.js:45:52)
    at Compiler.wrappedFunc (node_modules/speed-measure-webpack-plugin/WrappedPlugin/index.js:26:24)
    at Compiler.applyPluginsAsyncSeries (node_modules/tapable/lib/Tapable.js:206:13)
    at Compiler.emitAssets (node_modules/webpack/lib/Compiler.js:354:8)
    at onCompiled (node_modules/webpack/lib/Compiler.js:58:19)
    at applyPluginsAsync.err (node_modules/webpack/lib/Compiler.js:510:14)
    at next (node_modules/tapable/lib/Tapable.js:202:11)
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh

And my webpack.config.dev.js:

'use strict';

const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const StatsPlugin = require('stats-webpack-plugin');
const Visualizer = require('webpack-visualizer-plugin');
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');

const publicPath = '/';
const publicUrl = '';
const env = getClientEnvironment(publicUrl);

process.traceDeprecation = true;
const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  cache: true,
  devtool: 'inline-eval-cheap-source-map',
  entry: [
    require.resolve('react-dev-utils/webpackHotDevClient'),
    require.resolve('./polyfills'),
    'bootstrap-loader',
    paths.appIndexJs
  ],
  output: {
    path: paths.appBuild,
    pathinfo: true,
    filename: 'static/js/bundle.js',
    publicPath: publicPath
  },
  resolve: {
    modules: [
      'app',
      'node_modules'
    ],
    extensions: ['.js', '.json', '.jsx', '.react.js'],
    alias: {
      'react-native': 'react-native-web'
    }
  },

  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|jsx)$/,
        use: [
          {
            loader: 'eslint-loader'
          }
        ],
        include: paths.appSrc,
      },

      {
        exclude: [
          /\.html$/,
          /\.(js|jsx)(\?.*)?$/,
          /\.css$/,
          /\.gif$/,
          /\.jpg$/,
          /\.json$/,
          /\.png$/,
          /\.scss$/,
          /\.svg$/
        ],
        use: [
          {
            loader: 'url-loader',
            query: {
              limit: 10000,
              name: 'static/media/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(js|jsx)$/,
        include: [paths.appSrc, paths.appNodeModules + '/webgl-render-library'],
        use: [
          {
            loader: 'babel-loader',
            query: {
              cacheDirectory: true
            }
          }
        ]
      },
      {
        test: /\.css$/,
        include: /node_modules/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'raw-loader!postcss-loader',
        })
      },
      {
        test: /\.scss$/,
        include: paths.appSrc,
        use: [
          'style-loader',
          'raw-loader',
          'postcss-loader',
          'fast-sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [path.resolve(__dirname, '../config/sass-resources.scss')],
            },
          },
        ]
      },
      {
       test: /\.(eot|woff|ttf|svg|png|jpg|gif)$/,
       loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'file-loader',
            query: {
              name: 'static/media/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(png|jpg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 25000
            }
          }
        ]
      }
    ]
  },

  plugins: [
    new Visualizer(),

    new BundleAnalyzerPlugin({
      analyzerMode: 'server'
    }),

    new StatsPlugin('stats.json', {
      chunkModules: true,
    }),

    new webpack.optimize.ModuleConcatenationPlugin(),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      filename: "app.js",
      minChunks: function(module, count) {
        const match = module.context && !module.context.includes('node_modules') && !module.context.includes('/game/');
        return match;
      }
    }),

    new ExtractTextPlugin({
      filename: 'styles.css',
      allChunks: true
    }),

    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [autoprefixer],
        context: __dirname,
      },
    }),

    new InterpolateHtmlPlugin(env.raw),
    new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
    }),
    new webpack.DefinePlugin(env.stringified),
    new webpack.HotModuleReplacementPlugin(),
    new CaseSensitivePathsPlugin(),
    new WatchMissingNodeModulesPlugin(paths.appNodeModules)
  ],
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  devServer: {
    stats: 'verbose',
    profile: true,
  },
});

[stephencookdev]

Hey @samrod - thanks for raising :) I'll take a look at this properly tonight, but yeah this looks like a bug in SMP's proxy code

[guptakvgaurav]

@stephencookdev I am facing the same issue.

TypeError: compilation.assets[asset].size is not a function
    at obj.assets.Object.keys.map.asset (/Users/ttn/labs/ttn_web/node_modules/webpack/lib/Stats.js:224:38)
    at Array.map (native)
    at Stats.toJson (/Users/ttn/labs/ttn_web/node_modules/webpack/lib/Stats.js:221:49)
    at Compiler.<anonymous> (/Users/ttn/labs/ttn_web/node_modules/html-webpack-plugin/index.js:68:44)
    at Compiler.applyPluginsAsyncSeries (/Users/ttn/labs/ttn_web/node_modules/tapable/lib/Tapable.js:206:13)
    at Compiler.emitAssets (/Users/ttn/labs/ttn_web/node_modules/webpack/lib/Compiler.js:308:7)
    at onCompiled (/Users/ttn/labs/ttn_web/node_modules/webpack/lib/Compiler.js:247:11)
    at /Users/ttn/labs/ttn_web/node_modules/webpack/lib/Compiler.js:499:13
    at next (/Users/ttn/labs/ttn_web/node_modules/tapable/lib/Tapable.js:202:11)
    at Compiler.<anonymous> (/Users/ttn/labs/ttn_web/node_modules/webpack/lib/CachePlugin.js:62:5)
    at Compiler.applyPluginsAsyncSeries (/Users/ttn/labs/ttn_web/node_modules/tapable/lib/Tapable.js:206:13)
    at /Users/ttn/labs/ttn_web/node_modules/webpack/lib/Compiler.js:496:10
    at Compilation.applyPluginsAsyncSeries (/Users/ttn/labs/ttn_web/node_modules/tapable/lib/Tapable.js:195:46)
    at self.applyPluginsAsync.err (/Users/ttn/labs/ttn_web/node_modules/webpack/lib/Compilation.js:649:19)
    at Compilation.applyPluginsAsyncSeries (/Users/ttn/labs/ttn_web/node_modules/tapable/lib/Tapable.js:195:46)
    at self.applyPluginsAsync.err (/Users/ttn/labs/ttn_web/node_modules/webpack/lib/Compilation.js:640:11)

Webpack version - 2.6.0

const config = {
    entry: {
      app: ['babel-polyfill', './src/index.js'],
        vendor: ['react', 'react-dom']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    module: {
        rules: [
            // {
            //     test: /\.json$/,
            //     exclude: [
            //         path.resolve(__dirname, 'node_modules'),
            //     ],
            //     loader: 'json-loader'
            // },
            {
                test: /.(jsx|js)?$/,
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                ],
                loader: 'babel-loader',
            },
            {
                test: /.(scss|css)$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    //resolve-url-loader may be chained before sass-loader if necessary
                    use: [{loader: 'css-loader'}, {loader: 'sass-loader', options: {includePaths: [ './node_modules/bourbon' ]}}]
                }),
            },
            {
                test: /\.(otf|png|jpg|jpeg|gif|ttf|eot|svg|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: 'url-loader?limit=10000',
            },
            {
                test: /\.yaml$/,
                use: [
                    {loader: 'json-loader'},
                    {loader: 'yaml-loader'},
                ]
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    resolve: {
        alias: {
            utils: path.resolve(__dirname, './src/utils'),
            constants: path.resolve(__dirname, './src/constants'),
            components: path.resolve(__dirname, './src/app/components'),
            containers: path.resolve(__dirname, './src/app/containers'),
            core: path.resolve(__dirname, './src/app/core'),
            lodashC: path.resolve(__dirname, './src/js/lodash.custom.min.js')
        },
        extensions: ['.js', '.jsx'],
    },
    devtool: 'source-map',
    plugins: [
        // new CleanWebpackPlugin(pathsToClean, cleanOptions),
        // new BundleAnalyzerPlugin(),
        new ExtractTextPlugin({
            filename:'style.css',
            disable: false
        }),
        new webpack.optimize.CommonsChunkPlugin({
            names: 'vendor',
            filename: 'vendor.js'
        }),
        new webpack.DefinePlugin({
            'VENDOR': JSON.stringify(process.env.VENDOR),
            'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
            "process.env": {
                "NODE_ENV": JSON.stringify(process.env.NODE_ENV),
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html'
        }),
        new LiveReloadPlugin(),
        new WebpackBrowserPlugin({
            port: 3000,
            url: 'http:https://127.0.0.1'
        }),
    ]
};

module.exports = smp.wrap(config);

webpack configuration is fed into the webpack using node js script, where I make some updates in the script.

var webpackConfig = require(path.resolve(__dirname, `../${webpackConfigFileName}`));
webpackConfig.output.path = path.resolve(webpackConfig.output.path, vendor);
let definePluginConfig = webpackConfig.plugins.find(plugin => {
    return plugin instanceof webpack.DefinePlugin
})
definePluginConfig.definitions.IMG_FOLDER_PREFIX = 'some value here';
var compiler = webpack(webpackConfig);

[stephencookdev]

Ahh, okay - I've gotten to the bottom of this now. Thanks for sharing your webpack configs guys, very enlightening

Basically the way we're preventing infinite-loops of wrapping is by adding a _smpWrapped: true to the objects we wrap. Turns out, in some instances, this can cause certain configs to confuse this _smpWrapped key to end up in compilation.assets, which can then in certain configs cause webpack to try and treat this as an actual asset, and invoke asset methods such as .size() on it

We should be able to mitigate this by keeping a local reference of wrapped objects, rather than marking the objects themselves. I'll get on a fix for this soon.

[stephencookdev]

Okay, I've raised #29 which should fix up the issue...

Would be great if you guys could check out the branch locally, and just confirm the fix. But if not, I'll deploy tomorrow :)

[guptakvgaurav]

Still getting the issue, although it is different one now.

Could not find a matching event to end misc compile { fillLast: true }
/Users/ttn/labs/ttn_web/node_modules/speed-measure-webpack-plugin/index.js:104
        throw new Error("No matching event!");
        ^

Error: No matching event!
    at SpeedMeasurePlugin.addTimeEvent (/Users/ttn/labs/ttn_web/node_modules/speed-measure-webpack-plugin/index.js:104:15)
    at Compiler.compiler.plugin (/Users/ttn/labs/ttn_web/node_modules/speed-measure-webpack-plugin/index.js:118:12)
    at Compiler.applyPlugins (/Users/ttn/labs/ttn_web/node_modules/tapable/lib/Tapable.js:61:14)
    at /Users/ttn/labs/ttn_web/node_modules/webpack/lib/Compiler.js:271:13
    at Compiler.emitRecords (/Users/ttn/labs/ttn_web/node_modules/webpack/lib/Compiler.js:367:37)
    at /Users/ttn/labs/ttn_web/node_modules/webpack/lib/Compiler.js:265:12
    at /Users/ttn/labs/ttn_web/node_modules/webpack/lib/Compiler.js:360:11
    at next (/Users/ttn/labs/ttn_web/node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.compiler.plugin (/Users/ttn/labs/ttn_web/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/Users/ttn/labs/ttn_web/node_modules/tapable/lib/Tapable.js:222:13)
    at Compiler.afterEmit (/Users/ttn/labs/ttn_web/node_modules/webpack/lib/Compiler.js:357:8)
    at Compiler.<anonymous> (/Users/ttn/labs/ttn_web/node_modules/webpack/lib/Compiler.js:352:14)
    at /Users/ttn/labs/ttn_web/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Users/ttn/labs/ttn_web/node_modules/async/dist/async.js:1050:13)
    at /Users/ttn/labs/ttn_web/node_modules/async/dist/async.js:958:16
    at /Users/ttn/labs/ttn_web/node_modules/graceful-fs/graceful-fs.js:43:10

I was able to see the output generated by SMP ( time taken by each module), but after that it got crashed.

I will try to look into this issue tonight.

[stephencookdev]

@guptakvgaurav I think that you've been really unlucky and hit 2 completely independent issues 🤔

I've raised #30 to discuss your second issue - and will resolve this one as complete.