bin/webpack -p fails to process jest snapshot files

[ktusznio]

bin/webpack works fine, but NODE_ENV=production RAILS_ENV=production bin/webpack -p fails:

» RAILS_ENV=production NODE_ENV=production bin/webpack -p
Hash: 9b023edef321541c6d98
Version: webpack 3.5.5
...

ERROR in application-e06269f751f2d02e6bcf.js from UglifyJs
Unexpected character '`' [./app/javascript/apps/account/components/__snapshots__/AccountPage.test.js.snap:3,0][application-e06269f751f2d02e6bcf.js:1,279057

The offending file:

./app/javascript/apps/account/components/__snapshots__/AccountPage.test.js.snap:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`AccountPage renders 1`] = `
<section
  className="AccountPage__Wrapper-orVeb jTAEQy"
>
</section>
`;

A few things are weird about this:

• webpack's uglifyjs-webpack-plugin uses "uglify-es" which should be able to process ES6 files.
• uglifyjs-webpack-plugin@^0.4.6 tests against /.js($|?)/i files, which should not match AccountPage.test.js.snap -- why is UglifyJs processing this file?
• I'm using ignore-loader with the following config -- again, why is UglifyJs processing the snapshot file?

module.exports = {
  test: /.test.js.snap$/,
  loader: 'ignore-loader'
}

[ktusznio]

Strangely, RAILS_ENV=production NODE_ENV=production bundle exec rails webpacker:compile does not throw an error:

Webpacker is installed 🎉 🍰
Using ./config/webpacker.yml file for setting up webpack paths
Compiling…
Compiled all packs in ./public/packs

[javan]

I'm not sure what's causing the error, but Webpacker already configures production builds so there's no need for the -p flag.

webpacker/package/environments/production.js

Lines 9 to 25 in fb8dd8c

	this.plugins.set('ModuleConcatenation', new webpack.optimize.ModuleConcatenationPlugin())
	this.plugins.set('UglifyJs', new webpack.optimize.UglifyJsPlugin({
	sourceMap: true,
	compress: {
	warnings: false
	},
	output: {
	comments: false
	}
	}))
	this.plugins.set('Compression', new CompressionPlugin({
	asset: '[path].gz[query]',
	algorithm: 'gzip',
	test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
	}))

[gauravtiwari]

Yep we do and hence the error - it's trying to uglify twice.

For ignore loader, you can just setup with extension:

module.exports = {
  test: /\.snap$/,
  loader: 'ignore-loader'
}

[ktusznio]

Gotcha, thank you!