gatsby: [v2] Typescript plugin not working

Description

I tried to use the typescript plugin with v2 to no avail. I get the following error message.

ERROR in ./src/pages/index.tsx
Module parse failed: Unexpected token (3:7)
You may need an appropriate loader to handle this file type.
| import * as React from 'react';
|
| export interface IndexProps {}
|
| export interface IndexState {}
 @ ./.cache/sync-requires.js 11:51-124
 @ ./.cache/root.js
 @ ./.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
ℹ ｢wdm｣: Failed to compile.

Environment

Gatsby version (npm list gatsby): 2.0.0-alpha.40
gatsby-cli version (gatsby --version):
Node.js version: 8.9.x
Operating System: macOS Sierra

File contents (if changed)

gatsby-config.js:

module.exports = {
  plugins: [`gatsby-plugin-typescript`, `gatsby-plugin-react-helmet`],
};

package.json: N/A gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 32 (23 by maintainers)

Most upvoted comments

It works but I had to force the preset to @babel/preset-typescript 7.0.0-beta.42 because 7.0.0-beta.49 throws the following error:

Module build failed: Error: [BABEL] C:\dev\gatsby-typescript-staticquery\src\pages\index.tsx: .overrides is not allowed in preset options
    at Object.keys.forEach.key (C:\dev\gatsby-typescript-staticquery\node_modules\@babel\core\lib\config\validation\options.js:71:13)

Test repo at https://github.com/dannywils/gatsby-typescript-staticquery/tree/babel

dannywils on Jun 1, 2018

Got preset-typescript working (only tried with babel beta 49) with the following configuration:

const resolvableExtensions = () => {
  return [`.ts`, `.tsx`]
}

const onCreateWebpackConfig = (
  { actions, loaders, stage },
  { compilerOptions, ...options }
) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: [
            {
              loader: require.resolve(`babel-loader`),
              options: {
                cacheDirectory: true,
                babelrc: false,
                sourceType: "unambiguous",
                presets: [
                  `@babel/preset-env`,
                  `@babel/preset-react`,
                  `@babel/preset-typescript`,
                ].map(require.resolve),
                plugins: [
                  require.resolve(`babel-plugin-remove-graphql-queries`),
                ],
              },
            },
          ],
        },
      ],
    },
  })
}
exports.onCreateWebpackConfig = onCreateWebpackConfig
exports.resolvableExtensions = resolvableExtensions

Here I’m not using setBabelPreset, since that seems to only affect /.jsx?/ files.

This is only a quick fix though, since in a more general setup we should somehow be able to pass all the correct arguments to the presets and plugins. For comparison, here’s a simplified version of the default rules for js/jsx parsing:

{
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      use: [
        {
          options: {
            cacheDirectory: true,
            babelrc: false,
            sourceType: "unambiguous",
            presets: [
              [
                "preset-env",
                {
                  loose: true,
                  modules: false,
                  useBuiltIns: "usage",
                  targets: { browsers: [Array] },
                },
              ],
              [
                "preset-react",
                {
                  useBuiltIns: true,
                  pragma: "React.createElement",
                  development: false,
                },
              ],
              ["preset-flow", {}],
            ],
            plugins: [
              "babel-plugin-remove-graphql-queries",
              ["plugin-proposal-class-properties", { loose: true }],
              ["plugin-syntax-dynamic-import", {}],
              [
                "plugin-transform-runtime",
                { helpers: true, regenerator: true, polyfill: false },
              ],
            ],
          },
          loader: "babel-loader",
        },
      ],
    },
  ]
}

dennari on Jun 1, 2018

Btw, why is @babel/preset-flow included by default?

My guess is that it was to reduce breakage in the babel7 migration, babel6’s react preset included flow. Good question tho as to whether that is still a good idea…

jquense on May 30, 2018