Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

TSConfig Paths plugin for Gatsby

Description

This plugin will provide support for paths configured in your tsconfig by using tsconfig-paths-webpack-plugin.


How to install

  • Install gatsby-plugin-tsconfig-paths in your project
npm install -D gatsby-plugin-tsconfig-paths
  • Include the plugin in your gatsby-config.js.
// gatsby-config.js
module.exports = {
  plugins: [
    ...,
    `gatsby-plugin-tsconfig-paths`
  ]
}

Available Options

  • For list of options that are available for this plugin, see the

tsconfig-paths-webpack-plugin documentation at the following:

https://github.com/dividab/tsconfig-paths-webpack-plugin#options

for example:

// gatsby-config.js
module.exports = {
  plugins: [
    ...,
    {
      resolve: `gatsby-plugin-tsconfig-paths`,
      options: {
        configFile: `${__dirname}/tsconfig.json`,
        silent: true,
        colors: false
      },
    }
  ]
}

Default options

  • configFile: Defaults to the tsconfig.json located at your process’s

current working directory.

  • extensions: Defaults to [‘.ts’, ‘.tsx’, ‘.js’, ‘.jsx’].

Additional information

According to the documentation for tsconfig-paths-webpack-plugin, if the tsconfig option allowJs is set, then this plugin’s extensions option should be set to match webpack‘s. Because typescript transpiling is usually done in the same set of loaders as javascript, this plugin will set the webpack extensions to match the default described above, using the resolvableExtensions endpoint.

© 2024 Gatsby, Inc.