Gatsby - webpack 无法使用 `gatsby-plugin-alias-imports` 解析别名导入

Question

我刚刚创建了一个新的 Gatsby 项目，并创建了几个小组件，这些组件在导入后会显示在索引页面上，如下所示：

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"

想要稍微整理一下，我发现您可以使用 webpack 定义别名并安装 gatsby-plugin-alias-imports 来实现这一点。使用yarn add gatsby-plugin-alias-imports 安装插件并添加必要的配置后，我的gatsby-config.js 如下所示：

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",
        ],
      }
    },
    ...
    ...

我的项目结构如下：

.
├── 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

然而，每当我尝试在导入中使用 @components 语法时：

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

yarn run develop 报告无法解析 @components 别名：

 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

我是否遗漏了一些明显的东西？我已经阅读了该插件的文档，并且认为我没有遗漏任何内容。我已经对node_modules 和yarn.lock 进行了核对，但没有成功。

有人有什么建议吗？

Answer 1

一位朋友向我指出，我在src/components/ 目录中缺少一个index.js 页面。

据我了解，每当您设置指向目录的别名时，它实际上都会引用指定目录中包含的 index.js 文件。

在创建文件并重新导出其中的组件后，webpack 不再有任何问题。

我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';