Gatsby: [v2] TypeScript broken after `[email protected]`

[azdanov]

On version [email protected] everything works.

On version [email protected] 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 [email protected].

[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 [e-mail]
wrote:

On version [email protected] everything works.

On version [email protected] 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 [email protected] is used, but still same issue.

[mattes3]

Same thing with my typescript-based site. With version [email protected]typescript works fine. With [email protected], 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 [email protected] 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! 👍