Typescript 和 Gatsby：開發包無法解析路徑，但 VS Code 可以

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'這樣的相對路徑時，這些錯誤只會出現 go

---

作為旁注，我也不import {MyType} from 'types' ，其結構為

src
    -> types
        -> index.ts

它給出了一個錯誤，在'types'一詞下有一條紅線，指出Cannot find module 'types'.ts(2307)我必須將導入更改為import {Issue} from 'types/index'

---

我已經嘗試運行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')
      }
    }
    ...
  ]
}

Answer 2

Shubham 的解決方案在 2021 年 6 月仍然有效 - 如果您希望它自動解析src下的所有目錄，您可以使用我為此編寫的一個小兩行代碼：

const fs = require("fs");
const path = require("path");

const srcDirs = fs.readdirSync(path.resolve(__dirname, "src"));

const rootDirsConfig = {};

srcDirs.forEach((srcDir) => {
    rootDirsConfig[srcDir] = path.resolve(__dirname, "src", srcDir);
});

module.exports = {
    plugins: [
          {
            resolve: "gatsby-plugin-root-import",
            options: rootDirsConfig,
          },
    ]
}