Gatsby - webpack cannot resolve aliased imports using `gatsby-plugin-alias-imports`

Question

I've just created a new Gatsby project and have created a couple of small components that are being displayed on an index page after being imported like so:

import Nav from "../components/Nav"
import Intro from "../components/Intro"
import About from "../components/About"
import Experience from "../components/Experience"
import Projects from "../components/Projects"
import Contact from "../components/Contact"
import Footer from "../components/Footer"

Wanting to tidy this up a little, I discovered you could define aliases with webpack and installed the gatsby-plugin-alias-imports to achieve this. After installing the plugin with yarn add gatsby-plugin-alias-imports and adding the necessary config, my gatsby-config.js looks like the following:

const path = require('path')

module.exports = {
  siteMetadata: {
    title: "Site Title",
  },
  plugins: [
    {
      resolve: "gatsby-plugin-alias-imports",
      options: {
        alias: {
          '@components': path.resolve(__dirname, 'src/components'),
          '@pages': path.resolve(__dirname, 'src/pages'),
        },
        extensions: [
          "js",
        ],
      }
    },
    ...
    ...

My project is structured like so:

.
├── README.md
├── gatsby-config.js
├── package.json
├── src
│   ├── components
│   │   ├── about.js
│   │   ├── contact.js
│   │   ├── experience.js
│   │   ├── footer.js
│   │   ├── intro.js
│   │   ├── nav.js
│   │   └── projects.js
│   ├── pages
│   │   ├── 404.js
│   │   └── index.js
│   └── scss
│       └── main.scss
├── static
│   └── static
│       └── icons
│           ├── github.svg
│           ├── instagram.svg
│           └── linkedin-in.svg
└── yarn.lock

Yet whenever I try to use @components syntax in an import:

import { Nav, Intro, About, Experience, Projects, Contact, Footer } from "@components"

yarn run develop reports that the @components alias can't be resolved:

 ERROR #98124  WEBPACK

Generating development SSR bundle failed

Can't resolve '@components' in '/Users/James/Projects/personal-site/src/pages'

If you're trying to use a package make sure that '@components' is installed. If you're trying to use a
local file make sure that the path is correct.

File: src/pages/index.js:2:0

Am I missing something obvious? I've read the documentation for the plugin and don't think I have omitted anything. I've nuked node_modules and yarn.lock for good measure but without success.

Does anyone have any suggestions?

user_8005800 · Answer

A friend pointed out to me that I was missing an index.js page within the src/components/ directory.

As I understand it whenever you setup an alias which points toward a directory, it will actually reference the index.js file contained within the specified directory.

After creating the file and re-exporting the components within it, webpack no longer had any issues.

Contents of my src/components/index.js:

export { default as Nav } from './nav';
export { default as Footer } from './footer';

export { default as About } from './about';
export { default as Contact } from './contact';
export { default as Experience } from './experience';
export { default as Intro } from './intro';
export { default as Projects } from './projects';

Gatsby - webpack cannot resolve aliased imports using `gatsby-plugin-alias-imports`

1 Answers