Typescript и Gatsby: пакет разработки не может разрешать пути, но VS Code может - PullRequest
Новая
       51

Typescript и Gatsby: пакет разработки не может разрешать пути, но VS Code может

0 голосов
/ 08 мая 2020

У меня есть несколько импортированных файлов, например 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"]
}

At в какой момент ошибка исчезнет. Когда я пытаюсь собрать свой пакет разработки через запуск gatsby develop, все выглядит нормально, пока не появится ⠹ Building development bundle

За которым вскоре следует множество операторов, таких как Can't resolve 'components/Navi' in '~/src/components'

И только эти ошибки go прочь, когда я указываю относительный путь, например import Navi from '../Navi'

В качестве примечания, я также не могу сделать import {MyType} from 'types' со структурой 

src
    -> types
        -> index.ts

Он выдает ошибку с красной линией под словом 'types', в котором указано Cannot find module 'types'.ts(2307) И я должен изменить импорт на import {Issue} from 'types/index'

Я уже пробовал запустить gatsby clean и удалить node_modules

1 Ответ

1 голос
/ 18 мая 2020

Вам нужно добавить gatsby-plugin-root-import в ваш gatsby-config. js, чтобы использовать абсолютный импорт.

Webpack 4 предоставил псевдоним в своей конфигурации, с помощью которого вы можете укажите абсолютный импорт из указанной папки c. 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')
      }
    }
    ...
  ]
}
...