Adding Path Aliases In Gatsby

Similar to Webpack, adding path aliases in Gatsby is quite straightforward. To accomplish this, we need to add a plugin library.

$ npm i --save gatsby-plugin-alias-imports

Then in your gatsby-config.js file, add the following plugin configuration:

const path = require("path")

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-alias-imports`,
      options: {
        alias: {},
        extensions: [],
      },
    },
  ],
}

To specify your import aliases, simply add keys (i.e. the shortened paths) and values (i.e. the full paths) in the alias object.

alias: {
  "~components": path.resolve(__dirname, 'src/components'),
  "context": path.resolve(__dirname, 'src/context')
}