Build fails with 1.1.0

[mtramm]

Building my project that's referencing this package just started failing with 1.1.0. I have verified it still works with 1.0.2.

The build fails with the following error message:

[INFO] ERROR in 0.8b9097e06a13a452b81e.chunk.js from UglifyJs [INFO] Unexpected token: operator (>) [./~/react-flexbox-grid/lib/components/Col.js:77,0][0.8b9097e06a13a452b81e.chunk.js:4121,40] [INFO] Child html-webpack-plugin for "index.html": [INFO] [./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html] ./~/html-webpack-plugin/lib/loader.js!./app/index.html 813 bytes {0} [built]

[roylee0704]

Thanks for reporting! It seems that the issue is caused by babel6 and uglify.

[roylee0704]

@mthrm I'm not able to reproduce the error on my side, would you mind to paste your webpack.config here?

[mtramm]

Of course.

Production specifics:

// Important modules this config uses
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const GenerateFilePlugin = require('generate-file-plugin');

module.exports = require('./webpack.base.babel')({
  // In production, we skip all hot-reloading stuff
  entry: [
    path.join(process.cwd(), 'app/app.js'),
  ],

  // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
  output: {
    filename: '[hash]-[name].js',
    chunkFilename: '[name].[chunkhash].chunk.js',
    publicPath: '/',
  },

  devtool: 'source-map',

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      children: true,
      minChunks: 2,
      async: true,
    }),

    // Minify and optimize the index.html
    new HtmlWebpackPlugin({
      template: 'app/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      inject: true,
    }),
    new GenerateFilePlugin('./internals/webpack/metadata.json.js', {
      output: 'metadata.json',
    }),

    // Extract the CSS into a separate file
    new ExtractTextPlugin('[name].[contenthash].css'),
  ],

  performance: {
    assetFilter: (assetFilename) => !(/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename)),
  },
});

Base config (shared between prod and dev):

/**
 * COMMON WEBPACK CONFIGURATION
 */

const path = require('path');
const webpack = require('webpack');

// PostCSS plugins
const cssnext = require('postcss-cssnext');
const postcssFocus = require('postcss-focus');
const postcssReporter = require('postcss-reporter');

const packageJSON = require('../../package.json');
const outputPath = 'build';

module.exports = (options) => ({
  entry: options.entry,
  output: Object.assign({ // Compile into js/build.js
    path: path.resolve(process.cwd(), outputPath),
    publicPath: '/',
  }, options.output), // Merge with env dependent settings
  module: {
    loaders: [{
      test: /\.js$/, // Transform all .js files required somewhere with Babel
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: options.babelQuery,
    }, {
      // Transform our own .css files with PostCSS and CSS-modules
      test: /\.(c|le)ss$/,
      exclude: /node_modules/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: {
            localIdentName: '[local]__[path][name]__[hash:base64:5]',
            modules: true,
            importLoaders: 1,
            sourceMap: true,
          },
        },
        { loader: 'postcss-loader' },
        {
          loader: 'less-loader',
          options: {
            sourceMap: true,
          },
        },
      ],
    }, {
      // Do not transform vendor's CSS with CSS-modules
      // The point is that they remain in global scope.
      // Since we require these CSS files in our JS or CSS files,
      // they will be a part of our compilation either way.
      // So, no need for ExtractTextPlugin here.
      test: /\.css$/,
      include: /node_modules/,
      exclude: /flexboxgrid/,
      loaders: ['style-loader', 'css-loader'],
    }, {
      test: /\.css$/,
      loader: 'style-loader!css-loader?modules',
      include: /flexboxgrid/,
    }, {
      test: /\.(eot|svg|ttf|woff|woff2|jpg|png|gif)$/,
      loader: 'file-loader',
    }, {
      test: /\.html$/,
      loader: 'html-loader',
    }, {
      test: /\.json$/,
      loader: 'json-loader',
    }, {
      test: /\.(mp4|webm)$/,
      loader: 'url-loader',
      query: {
        limit: 10000,
      },
    }],
  },
  plugins: options.plugins.concat([
    new webpack.ProvidePlugin({
      // make fetch available
      fetch: 'exports-loader?self.fetch!whatwg-fetch',
    }),

    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
    // inside your code for any environment checks; UglifyJS will automatically
    // drop any unreachable code.
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        // 'context' needed for css-loader
        context: __dirname,
        postcss: () => [
          postcssFocus(),
          cssnext({
            browsers: ['last 2 versions', 'IE > 10', '>1%'],
          }),
          postcssReporter({
            clearMessages: true,
          }),
        ],
      },
    }),
  ]),
  resolve: {
    modules: ['app', 'node_modules'],
    extensions: [
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'main',
      'jsnext:main',
    ],
  },
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window
  performance: options.performance || {},
});

[roylee0704]

@mthrm Hmm, that is strange. Can you give me a repo with a recreation of this? I'll look into.

[danny-andrews]

I ran into this problem as well. This commit is the culprit: https://github.com/roylee0704/react-flexbox-grid/commit/83dcb227cdd0f040082b95c6191cc79346d4d896#diff-e56633f72ecc521128b3db6586074d2cR7. We shouldn't be targeting node in the babel env preset, because this library is meant to be run in the browser.

The referenced error comes from the fact that lib/createProps.js has this line: Object.keys(props).filter(key => key === 'children' || !propTypes[key]).forEach(key => newProps[key] = props[key]);

Notice the => which hasn't been transpiled to es5.

[charliegroll]

I second @danny-andrews 's findings - => isn't being transpiled, which isn't caught in my build... but it definitely breaks in IE 11.

[roylee0704]

Hey guys, try the latest build? :) This time I compile the source with babel-preset-2015. Let me know if it works!

@danny-andrews @charliegroll Yes, you guys were right :) Thanks Guys!

[danny-andrews]

LGTM, thanks for fixing this so quickly @roylee0704!

[roylee0704]

Good to know that! ;) I should close this now.