gatsby build fails to minify js if typescript is used, doesn't show the error

[farcaller]

Description

Note: this issue was reported elsewhere at least once (#1887). It's still broken in the current gatsby version.

gatsby build leaves the component---src-pages-index-tsx-***.js file unminified, because of the SyntaxError: Unexpected token: operator (>) in a =>.

Environment

Gatsby version: 1.9.149
Node.js version: v8.1.3
Operating System: OSX

File contents (if changed):

gatsby-config.js:

process.setMaxListeners(0);

const plugin = (resolve, opts=null) => {
  const d = {resolve};
  if (opts) {
    d.options = opts;
  }
  return d;
}

module.exports = {
  plugins: [
    'gatsby-plugin-typescript',
    
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sharp',
    plugin('gatsby-plugin-typography', {
      pathToConfigModule: 'src/utils/typography.ts',
    }),
    plugin('gatsby-plugin-google-fonts', {
      fonts: ['source sans pro', 'overlock'],
    }),
    plugin('gatsby-plugin-nprogress', {
      color: '#FF4F00',
      showSpinner: true,
    }),
    'gatsby-plugin-manifest',
    'gatsby-plugin-offline',

    'gatsby-transformer-sharp',
    
    plugin('gatsby-source-filesystem', {
      name: 'images',
      path: `${__dirname}/src/img/`,
    }),
  ],
}

Actual result

gatsby build silently fails to minify a js file.

Expected behavior

gatsby build properly minifies the file. If it fails to do so it at the very least must show lots of red bold alerts.

Steps to reproduce

Given the following index.tsx:

export default (props: any) => {
  return <h1>hello world</h1>;
}

Run gatsby build.

Result: component---src-pages-index-tsx-***.js file isn't minified.

If I instrument node_modules/webpack/lib/optimize/UglifyJsPlugin.js (around line 122), I can see the following error:

⠐ Building production JavaScript bundlesopt chunk file  component---src-pages-index-tsx-95dadac712787e4124a7.js JS_Parse_Error {
  message: 'SyntaxError: Unexpected token: operator (>)',
  filename: 'component---src-pages-index-tsx-95dadac712787e4124a7.js',
  line: 1931,
  col: 26,
  pos: 71372,
  stack: 
    Error
        at new JS_Parse_Error (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1547:18)
        at js_error (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1555:11)
        at croak (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2094:9)
        at token_error (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2102:9)
        at unexpected (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2108:9)
        at expr_atom (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2635:9)
        at maybe_unary (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2797:19)
        at expr_ops (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2832:24)
        at maybe_conditional (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2837:20)
        at maybe_assign (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2861:20)
        at maybe_assign (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2869:32)
        at maybe_assign (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2869:32)
        at expression (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2880:20)
        at simple_statement (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2319:55)
        at eval (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2188:19)
        at eval (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2141:24)
        at block_ (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2434:20)
        at eval (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2406:25)
        at function_ (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2412:15)
        at expr_atom (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2627:24)
        at maybe_unary (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2797:19)
        at expr_ops (eval at <anonymous> (./node_modules/webpack/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2832:24)

[KyleAMathews]

Looks like that's a Typescript file? Do you have the typescript plugin installed?

[farcaller]

Yep, it's in the plugins list up there.

Here's the tsconfig.json if you wonder:

{
  "compilerOptions": {
      "outDir": "./dist/",
      "sourceMap": true,
      "noImplicitAny": true,
      "module": "commonjs",
      "target": "esnext",
      "jsx": "react",
      "lib": ["dom", "esnext"]
  },
  "include": [
      "./src/**/*"
  ]
}

[farcaller]

Here's a simple way to reproduce:

$ gatsby new https://github.com/haysclark/gatsby-starter-typescript
$ cd gts ; gatsby build

The generated component---src-pages-404-tsx-90a04ce7bd4d55a03791.js reads:

webpackJsonp([178469467687848],{

/***/ 181:
/***/ (function(module, exports, __webpack_require__) {

	"use strict";
	
	Object.defineProperty(exports, "__esModule", { value: true });
	const React = __webpack_require__(4);
	const NotFoundPage = () => React.createElement("div", null, React.createElement("h1", null, "NOT FOUND"), React.createElement("p", null, "You just hit a route that doesn't exist... the sadness."));
	exports.default = NotFoundPage;

/***/ })

});
//# sourceMappingURL=component---src-pages-404-tsx-90a04ce7bd4d55a03791.js.map

Now, if you change 404.tsx to use function() {} instead of an arrow function, it's minified properly:

webpackJsonp([0xa25129398ba8],{181:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const u=n(4),l=function(){return u.createElement("div",null,u.createElement("h1",null,"NOT FOUND"),u.createElement("p",null,"You just hit a route that doesn't exist... the sadness."))};t.default=l}});
//# sourceMappingURL=component---src-pages-404-tsx-8800a323347868ec6a23.js.map

[farcaller]

I think I've figured the source of the problem. In here: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-typescript/src/gatsby-node.js#L35 the loaders are set to

    loaders: [
      `babel?${JSON.stringify({ plugins: [extractQueryPlugin] })}`,
      `ts-loader?${JSON.stringify(opts)}`,
    ],

instead of the js pipeline:

    config.loader(`js`, {
      test: /\.jsx?$/, // Accept either .js or .jsx files.
      exclude: /(node_modules|bower_components)/,
      loader: `babel`,
      query: babelConfig,
    })

By skipping full babel run there the uglify gets a raw unprocessed output from TS.

I'd send you a patch to fix this, if I knew how to get the program within the plugin context to re-define this: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js#L46, any ideas?

[KyleAMathews]

A PR would be great! Contribution instructions are at https://www.gatsbyjs.org/docs/how-to-contribute/#contributing

[RobertoMSousa]

Hello @farcaller . Did you manage to solve this problem? Because I'm having the same problem.

Error: component---src-pages-bitcoin-tsx-488bd2c4cdd76d9a016a.js from UglifyJs
SyntaxError: Unexpected token operator «*», expected punc «(» [./src/components/newsletter/newsletter.tsx:20,31]

tsconfig.json

"compilerOptions": {
      "outDir": "./dist/",
      "sourceMap": true,
      "noImplicitAny": true,
      "module": "commonjs",
      "target": "esnext",
      "jsx": "react",
      "lib": ["dom", "esnext"]
  },
  "include": [
      "./src/**/*"
  ]
}

I have gatsby-plugin-typescript installed on version1.4.20.
Thank you

[farcaller]

Yes, #3369 fixed it. If it's broken again I assume it's recent. Most probably it's #5520 which was fixed in #5709.

[RobertoMSousa]

I'm still having some problems with the async/await. I return to the old callbacks for now 👍