Gatsby: Gatsby not compiling with gatsby-plugin-typescript

[BennoDev]

Description

Can not get gatsby to work with Typescript. Build time errors (provided below).

Environment

Gatsby version: 1.9.158
Node.js version: 8.9.4
Operating System: Windows 10

File contents (if changed):

gatsby-config.js:

module.exports = {
    siteMetadata: {
        title: 'Gatsby Default Starter'
    },
    plugins: [
        'gatsby-plugin-react-helmet',
        'gatsby-plugin-typescript'
    ]
};

package.json:

 {
    "name": "gatsby-starter-default",
    "description": "Gatsby default starter",
    "version": "1.0.0",
    "author": "Kyle Mathews <[email protected]>",
    "dependencies": {
        "gatsby": "^1.9.158",
        "gatsby-link": "^1.6.34",
        "gatsby-plugin-react-helmet": "^2.0.3",
        "gatsby-plugin-typescript": "^1.4.15",
        "react-helmet": "^5.2.0"
    },
    "keywords": [
        "gatsby"
    ],
    "license": "MIT",
    "main": "n/a",
    "scripts": {
        "build": "gatsby build",
        "develop": "gatsby develop",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
        "@types/react": "^16.0.36",
        "@types/react-dom": "^16.0.3",
        "@types/react-helmet": "^5.0.3",
        "@types/react-router": "^4.0.21",
        "@types/react-router-dom": "^4.2.3",
        "tslint": "^5.9.1",
        "typescript": "^2.7.1"
    }
}

Actual result

The build goes up to info bootstrap finished.
The ts-loader proceeds to pick up the tsconfig.json file.
After that I get this error for all TSX files in src/layouts and src/pages:

Module build failed: ReferenceError: [BABEL] C:\Users\benno\Development\Gatsby\Test\src\pages\404.tsx: Unknown option: base.undefined. Check out http://babeljs.io/docs/usage/options/ for more information about options.

Expected behavior

It should compile the typescript code and serve the pages.

Steps to reproduce

1. Run gatsby new

2. Run npm install gatsby-plugin-typescript and add the plugin to gatsby-config.js

3. Convert the generated .js files to .tsx

4. Run npm run develop

[KyleAMathews]

Could you upgrade all your packages and try again?

[tsriram]

It's working fine for me on Ubuntu with the same versions of all packages. Not sure if this could be a Windows thing, but is there something you'd want to add to Steps to reproduce? Or you could push the repro repo to GitHub for others to try & see.

[BennoDev]

Thanks for the suggestion, running npm update did allow me to build the code but I'm now getting this runtime error:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in.

Here are the contents of the component causing this crash:

import * as React from 'react';

import Header from '../components/Header';

interface IProps {
    children (): React.ReactNode;
}

const TemplateWrapper: React.StatelessComponent<IProps> = ({ children }) => (
    <>
        <Header />
        <div
            style={{
                margin: '0 auto',
                maxWidth: 960,
                padding: '0px 1.0875rem 1.45rem',
                paddingTop: 0
            }}>
            {children()}
        </div>
    </>
);

export default TemplateWrapper;

I'll also include my tsconfig in case it might be relevant - but it's mostly mirroring the one from the Typescript example, with some added rules:

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

[DSchau]

@BennoDev I've run into that if, for instance ,Header (../components/Header) doesn't actually export what you're importing e.g. if ../components/Header contained

import * as React from 'react';

export function Header() {
  return <h1>Hello World</h1>;
} // not the default export you're expecting

this would throw that error. What are the contents of that Header file?

[tsriram]

Wonder if the version of React you're using doesn't support the fragment syntax <>...</> yet? Are you using gatsby-plugin-react-next?

[m-allanson]

The short fragment syntax <> isn't handled by Gatsby (yet!), even using gatsby-plugin-react-next. But maybe TypeScript will deal with that? If not, then using <Fragment> syntax should be fine.

[tsriram]

Yeah, TypeScript >2.6.2 has full support for fragment syntax. I just tried adding gatsby-plugin-react-next and I could use the fragment short syntax. Without the plugin it doesn't work.

[BennoDev]

@tsriram Using gatsby-plugin-react-next is the answer to my problem, thanks!