Alias/path imports with typescript in Gatsby
A brief explanation on how to get alias imports to work in Gatsby
Recently I began the development of a website for my father's foodservice and in the setup phase, I really wanted to make sure that I went into the projects with alias/path imports set up out of the box. I also wanted to try my hand at creating a typescript project from scratch and build upon my typescript knowledge. I decided on a Gatsby project with a focus on using typescript.
I started with trying to edit gatsby’s Webpack config through gatsby-node’s onCreateWebpackConfig action. The below code will make your imports work as aliases. Within the alias object, the key is how you’ll import inside of your code, and the value is the import location. We use the path to resolve from our current working directory which would be the root directory.
This got the website working but now we’re having issues with TypeScript. See, even though our imports are working on gatsby's side in compilation, typescript still doesn't know what we’re importing; This results in an error [TS2307] which states that it cannot find the module that we’re working with. The error for this can be a bit confusing as it assumes a few things like not understanding the context in which you’re running typescript or that gatsby already understands us. To fix this error, you’ll want to head over to your tsconfig.json file and edit the paths option in the compilerOptions object.
In this file, the main things you want to look at are gonna be the top-level include option and the module resolution, baseUrl, and paths options inside of compiler options.
- include specifies an array of filenames to include in the program(typescript)
- ModuleResolution specifies the module resolution strategy, we want to deal with node.js modules
- baseUrl must be specified if we are to use the paths option. Lets us resolve non-absolute module names.
- paths are a series of entries that remap imports to look up locations relative to baseUrl
Once we have all of these settings, we’re ready to go ahead and use the imports in our project with bot gatsby and typescript working together! Think of these two sets of options as a kind of partnership. You need both of them set up so that they can work together.
SideNote
All of my folders are set up like this, so instead of importing a directly as default from a file, I import from the base directory using index.ts and inside of index.ts I re-export them as a named export. It’s a tiny bit more work but I enjoy the structure and the organization it gives me, also importing named imports looks nicer than default imports.
TLDR:
both gatsby-node and tsconfig.json have to have information on the paths(tsconfig.json) and aliases(gatsby-webpack config) in order for you to use aliases in your imports.
