[v2] TypeScript broken after `gatsby@2.0.0-beta.106`

[azdanov]

On version gatsby@2.0.0-beta.106 everything works.

On version gatsby@2.0.0-beta.107 and higher there is an error for each component:

ERROR in ./src/pages/404.tsx 7:18
Module parse failed: Unexpected token (7:18)
You may need an appropriate loader to handle this file type.
| import Layout from "../components/Layout";
|
> const NotFoundPage: SFC = () => (
|   <Layout>
|     <Helmet>
 @ ./.cache/sync-requires.js 15:49-128
 @ ./.cache/app.js
 @ multi ./node_modules/react-hot-loader/patch.js (webpack)-hot-middleware/client.js?path=http://localhost:8000/__webpack_hmr&reload=true&overlay=false ./.cache/app

EDIT:

I'm using gatsby-plugin-typescript@2.0.0-beta.8.

[KyleAMathews]

Hmm that's no good! Could you share a site that reproduces the issue?

On Thu, Aug 16, 2018, 10:41 PM Anton Zdanov notifications@github.com wrote:

On version gatsby@2.0.0-beta.106 everything works.

On version gatsby@2.0.0-beta.107 and higher there is an error for each component:

ERROR in ./src/pages/404.tsx 7:18 Module parse failed: Unexpected token (7:18) You may need an appropriate loader to handle this file type.	import Layout from "../components/Layout";

const NotFoundPage: SFC = () => ( | | @ ./.cache/sync-requires.js 15:49-128 @ ./.cache/app.js @ multi ./node_modules/react-hot-loader/patch.js (webpack)-hot-middleware/client.js?path=http://localhost:8000/__webpack_hmr&reload=true&overlay=false ./.cache/app

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/7398, or mute the thread https://github.com/notifications/unsubscribe-auth/AAEVh5bbBh4C1XAFOzRJq-l-SlVS3Z51ks5uRi1LgaJpZM4WA4XN .

[azdanov]

Sure!

https://github.com/azdanov/gatsby-site

EDIT:

Here gatsby-plugin-typescript@2.0.0-beta.9 is used, but still same issue.

[mattes3]

Same thing with my typescript-based site. With version gatsby@2.0.0-beta.106typescript works fine. With gatsby@2.0.0-beta.110, it does not:

Error: ./src/utils/typography.ts 5:0
  Module parse failed: The keyword 'interface' is reserved (5:0)
  You may need an appropriate loader to handle this file type.
  | import { MOBILE_MEDIA_QUERY } from 'typography-breakpoint-constants';
  | 
  > interface OverrideStyle {
  |     adjustFontSizeTo: (fontSize: number) => { [key: string]: string };
  |     scale(n: number): { [key: string]: string };
   @ ./node_modules/gatsby-plugin-typography/.cache/typography.js 1:17-104
   @ ./node_modules/gatsby-plugin-typography/gatsby-ssr.js
   @ ./.cache/api-runner-ssr.js
   @ ./.cache/develop-static-entry.js

[resir014]

It seems that gatsby@2.0.0-beta.107 introduced some new APIs to modify the Babel config used by TS, and the TS plugin hasn't been updated to reflect that.

Looking into it later tonight.

[resir014]

Some progress.

Turns out the loaders.js() call the typescript plugin uses no longer returns the base babel config we extend from. @KyleAMathews Is this intentional?

[sambbaron]

Could this be related to the StaticQuery issues as well? https://github.com/gatsbyjs/gatsby/issues/5626

[KyleAMathews]

No this wasn't an intentional break. Sorry about missing this. I'm busy the next few days but if someone could put together a PR, I'll be merge it and release it.

[resir014]

@KyleAMathews I managed to fix it by adding an onCreateBabelConfig where I add @babel/preset-typescript in, but that part of my brain keeps saying it can't be that easy :)

I can PR this if you'd like, as a short term fix.

[cpboyd]

@resir014 Unfortunately that change isn't fixing all of my issues.

I'm using a custom Typescript typography theme based on: https://github.com/KyleAMathews/typography.js/blob/master/packages/typography-theme-fairy-gates/src/index.js

import { IOptionsType } from './types';
const headerFont = ['Sacramento', 'cursive'];
const bodyFont = ['Montserrat', 'sans-serif'];

const theme: IOptionsType = {
}

which fails at the const theme: IOptionsType = { line.

Where ./types contains:

export interface IOptionsType {
  title: string,
  baseFontSize?: string,
  baseLineHeight?: number,
  scaleRatio?: number,
  googleFonts?: IGoogleFontsType[],
  headerFontFamily?: string[],
  bodyFontFamily?: string[],
  headerColor?: string,
  bodyColor?: string,
  headerWeight?: number | string,
  bodyWeight?: number | string,
  boldWeight?: number | string,
  blockMarginBottom?: number,
  includeNormalize?: boolean,
  overrideStyles?: (
    verticalRhythm: IVerticalRhythmType, // TODO Create flow type for compass-vertical-rhythm and import here.
    options: IOptionsType,
    styles: any,
  ) => any,
  overrideThemeStyles?: (
    verticalRhythm: IVerticalRhythmType, // TODO Create flow type for compass-vertical-rhythm and import here.
    options: IOptionsType,
    styles: any,
  ) => any,
  plugins?: any[],
}

[resir014]

@cpboyd It might be failing because it conflicted @babel/preset-flow, which is included in the built-in babel config. Will need to find a way to remove that during build time.

[cpboyd]

@resir014 In my initial test (on my lunch break, so I was in a hurry), I only made the change to onCreateBabelConfig and failed to notice your other modifications.

Upon retesting, I no longer have the build issue. So your fix seems to be working for me now! Thanks for your work! 👍