reactjs - typescript 和 Gatsby : Development bundle cannot resolve paths but VS Code can

Question

我有一堆导入，比如 import Navi from 'components/Navi'

这些在 components/Navi 部分下有一个红色错误行，直到我将其添加到我的 tsconfig.json

"baseUrl": "./",
"paths": {
  "components/*": ["src/components/*"],
  "layouts/*": ["src/layouts/*"],
  "pages/*": ["src/pages/*"],
  "templates/*": ["src/templates/*"],
  "scss/*": ["src/scss/*"],
  "types": ["src/types"]
}

此时错误消失了。当我尝试通过运行 gatsby develop 构建我的开发包时，一切看起来都很好，直到出现 ⠹ Building development bundle

紧随其后的是许多语句，例如 Can't resolve 'components/Navi' in '~/src/components'

只有当我指定一个相对路径时，这些错误才会消失，比如 import Navi from '../Navi'

---

作为旁注，我也无法使用结构为

的 import {MyType} from 'types'

src
    -> types
        -> index.ts

它给出了一个错误，在单词 'types' 下有一条红线表示 Cannot find module 'types'.ts(2307) 我必须更改导入从'types/index'导入{Issue}

---

我已经尝试运行 gatsby clean 并删除 node_modules

Answer 1

您需要添加 gatsby-plugin-root-import到你的 gatsby-config.js 以便使用绝对导入。

Webpack 4 在其配置中提供了别名，您可以通过它指定从特定文件夹的绝对导入。 gatsby-plugin-root-import插件可以帮助您实现该配置

首先使用

安装它

npm install --save-dev gatsby-plugin-root-import

或

yarn add --dev gatsby-plugin-root-import

然后像下面这样在 gatsby-config.js 中配置它

// gatsby-config.js
const path = require('path')

module.exports = {
  plugins: [
    ...
    {
      resolve: 'gatsby-plugin-root-import',
      options: {
        "components": path.join(__dirname, "src/components"),
        "layouts": path.join(__dirname, "src/layouts"),
        "templates": path.join(__dirname, "src/templates"),
        "scss": path.join(__dirname, "src/scss"),
        "types": path.join(__dirname, "src/types"),
        "src": path.join(__dirname, 'src'),
        "pages": path.join(__dirname, 'src/pages')
      }
    }
    ...
  ]
}