Gatsby Typescript plugin quick tip

Sep 29, 2019
2 min read
Gatsby Typescript plugin quick tip header image

So there I was, blissfully ignorant of the nightmare that awaited me. I was about half way through converting a Gatsby starter site over from Javascript to Typescript. The wind was in my hair and I was feelin' good. Then, all of a sudden, some kind of demon jumped out in front of me. I tried driving on, but my wheels just kept spinning on the spot. The mighty Google didn't seem to help either. My burst of motivation was almost at an end... but alas, a solution was found!

The gosh darn problem

Running gatsby develop lead to the error below. This started happening after I converted some Javascript code that was being loaded as a Gatsby plugin over to Typescript.

Module parse failed: Unexpected token (5:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See [Concepts | webpack](https://webpack.js.org/concepts/#loaders)

The darn tootin solution

Move the gatsby-plugin-typescript plugin specification to the be the first item in the plugins list inside the gatsby-config.js file.

I'd added the gatsby-plugin-typescript plugin to my gatsby-config.js file, just like all the tutorials said to, but I'd put it near the bottom of the list of plugins. It just so happened that a plugin earlier in that list was written in Typescript and Gatsby had no idea how to deal with it just yet. Moving it to the top of the list means that it can be used to help load any Typescript plugins you may desire to use.

And that was it! Suddenly the wheels got traction and I was again of speeding through the rest of the Typescript conversion. Other demons awaited me ahead, but this one had been slain and in the moment, life was good again.