Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
farcaller opened this issue Dec 28, 2017 · 8 comments · Fixed by #3369
Closed

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

farcaller opened this issue Dec 28, 2017 · 8 comments · Fixed by #3369

Comments

@farcaller
Copy link
Contributor

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
Copy link
Contributor

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

@farcaller
Copy link
Contributor Author

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
Copy link
Contributor Author

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 farcaller changed the title gatsby build fails to minify js, doesn't show the error gatsby build fails to minify js if typescript is used, doesn't show the error Dec 30, 2017
@farcaller
Copy link
Contributor Author

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
Copy link
Contributor

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

This was referenced Dec 30, 2017
Closed
Merged
@RobertoMSousa
Copy link
Contributor

RobertoMSousa commented Jun 16, 2018 •
edited
Loading

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
Copy link
Contributor Author

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Run typescript sources through full babel transpiling pipeline farcaller/gatsby
3 participants
@farcaller @KyleAMathews @RobertoMSousa