When working on my CRA TypeScript projects, I appreciate how TypeScript prevents the dev server from compiling whenever there's an error in my code. Instead, it displays the error in both the browser and console, which helps me quickly identify and fix issues.
However, in my new Gatsby project, this behavior is different. While my IDE alerts me about any errors, running gatsby develop ignores those errors and compiles the code anyway, similar to how it would with plain JavaScript. How can I configure Gatsby to mimic the behavior I am accustomed to from CRA?
I have integrated gatsby-plugin-typescript into my project setup.
This is what my gatsby-config.js looks like:
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/assets`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
start_url: `/`,
},
},
{
resolve: `gatsby-plugin-typescript`,
options: {
isTSX: true, // defaults to false
allExtensions: true, // defaults to false
},
},
`gatsby-plugin-emotion`,
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
This is my tsconfig.json file:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"downlevelIteration": true,
"jsx": "react"
},
"include": [
"src/**/*"
]
}