Deep Dive

“The fastest auto dealership site in the world” How relentless optimization 8xed conversions

ContactSign Up for Free
Community Plugin
View plugin on GitHub


Gatsby plugin to resolve imports from your project’s /src directory

This plugin modifies your webpack config to allow imports from your /src directory, such as:

import MyComponent from 'components/MyComponent'

…instead of

import MyComponent from '../../components/MyComponent'


Add it to your project

yarn add gatsby-plugin-resolve-src

Then add it to your gatsby-config.js:

  plugins: [

VSCode Configuration

You have to tell VS Code how to find your modules by creating a tsconfig.json (or jsconfig.json) file in your project root. For example:

  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "*": [

See #9 for more info.

ESLint Configuration

If using eslint-plugin-import, you have to tell ESLint how to find your modules by configuring the default node resolver in your eslint config. For example:

  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "src"]

If your project is linting filetypes besides .js, you will have to add them explicitly. See the node resolver documentation for more details.


srcPath (file path)

Default: path.resolve(__dirname, '../../src')

The full path to your /src directory.

Yarn Workspaces

To resolve your src directory when using yarn workspaces, use the srcPath option:

  resolve: 'gatsby-plugin-resolve-src',
  options: {
    srcPath: path.resolve(__dirname, 'src'),
© 2022 Gatsby, Inc.