时间戳

首页 > 解决方案 > 在 Gatsby 中使用根导入插件为 NPM 包创建别名

javascript - 在 Gatsby 中使用根导入插件为 NPM 包创建别名

问题描述

我已经安装了gatsby-plugin-root-import插件来为我的 Gatsby 站点中的导入创建别名。我已经使用了一段时间，效果很好。

今天，我决定看看我是否可以将它用于我已经安装的 npm 包。我想我设置正确，但我收到一条错误消息，提示找不到模块：

Module not found: Error: Can't resolve 'FontAwesome' in '/sandbox/src/pages'

但是，当我查看我的代码时，它看起来应该可以工作：

{
      resolve: 'gatsby-plugin-root-import',
      options: {
        // Node Modules
        FontAwesome: path.join(__dirname, '@fortawesome/react-fontawesome'),

        // Main Folders
        SRC: path.join(__dirname, 'src'),
        Assets: path.join(__dirname, 'src/assets'),
        Components: path.join(__dirname, 'src/components'),
        Config: path.join(__dirname, 'src/config'),
        Layouts: path.join(__dirname, 'src/layouts'),
        Pages: path.join(__dirname, 'src/pages'),
        Plugins: path.join(__dirname, 'src/plugins'),
        Styles: path.join(__dirname, 'src/styles'),
        Utilities: path.join(__dirname, 'src/utilities'),

      },
    },

所有其他别名都可以正常工作——只有 FontAwesome 别名会创建未找到模块的错误消息。

知道为什么这不起作用以及我能做些什么来解决它吗？

谢谢。

PS这里是插件的链接： https ://github.com/mongkuen/gatsby-plugin-root-import

标签： javascriptreactjsnpmwebpackgatsby

解决方案

我认为问题在于：

FontAwesome: path.join(__dirname, '@fortawesome/react-fontawesome'),

您将使用 node_modules 中的插件名称加入根文件夹。但是您需要查看 node_modules 文件夹，因为它不会像导入一样自动解析。

您能否改为测试以下行？

FontAwesome: path.join(__dirname, 'node_modules/@fortawesome/react-fontawesome'),

推荐阅读