Enable React production mode

[ViliamKopecky]

I can't find the reason this starter disables react production mode. I tried removing almost every plugin and configuration, but still. This doesnt happen on clean gatsby starter - even with gatsby-plugin-typescript.

VM2992:21 Uncaught Error: React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://fb.me/react-perf-use-the-production-build     at <anonymous>:21:35

[fabien0102]

Interesting! No reason, it's a real bug :wink: I will try to check this tomorrow!

[resir014]

@fabien0102 Hey, this happens to me as well - I'm not using this starter kit, since I have my own, TypeScript-based setup, but it seems like it's a common issue among TypeScript at the moment.

My current hunch is that there's something that prevents gatsby-plugin-typescript to be perfectly chained with Webpack's UglifyJS plugin, so many files come out unminified (see also: https://github.com/gatsbyjs/gatsby/issues/2771)

Here's an example of the output bundle that Gatsby generates. If you have some ES6 stuff like this, Webpack 1's UglifyJsPlugin will run into problems when trying to minify.

[resir014]

My current workaround is to add this to gatsby-node.js:

const path = require('path')

const extractQueryPlugin = path.resolve(
  __dirname,
  `node_modules/gatsby/dist/utils/babel-plugin-extract-graphql.js`
)

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'build-javascript') {
    // Temporary workaround.
    // Here we override the Webpack plugin during the `build-javascript` stage to make everything
    // compile down to es5 - turns out Webpack 1's UglifyJsPlugin doesn't like that we have some
    // ES6 stuff littered in our final bundle...
    config.loader('typescript', {
      test: /\.tsx?$/,
      loaders: [
        `babel-loader?${JSON.stringify({ presets: ['babel-preset-env'], plugins: [extractQueryPlugin] })}`,
        'ts-loader'
      ]
    })
  }
}