React Native - 找不到模块 X 或其相应的类型声明

Question

我最近设置了一个 react native typescript 项目

我一直在尝试使用设置指南here 获得绝对路径。但无论我做什么，我都会不断收到错误Cannot find module 'X' or its corresponding type declarations TS(2307)

在当前状态下，我的tsconfig 看起来像

{
  "extends": "expo/tsconfig.base",
  "include": ["./src/**/*"],
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es2017"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "baseUrl": ".",
    "paths": {
      "@util/*": ["./src/util/*"],
      "@components/*": ["./src/components/*"],
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

我的babel.config.js 如下所示

module.exports = (api) => {
  api.cache(true);
  const presets = ['babel-preset-expo'];
  const plugins = [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.jsx', '.ts', '.tsx', '.json'],
        alias: {
          '@components': './src/components',
          '@util': './src/util',
        },
      },
    ],
  ];

  return {
    presets,
    plugins,
  };
};

我当前的eslintrc.js 如下所示

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
      tsx: true,
    },
    ecmaVersion: 13,
    sourceType: 'module',
  },
  globals: {
    React: 'readonly',
    JSX: 'readonly',
  },
  plugins: [
    'react',
    'import',
    '@typescript-eslint',
  ],
  rules: {
    'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    'import/extensions': ['error', 'ignorePackages', {
      js: 'never',
      jsx: 'never',
      ts: 'never',
      tsx: 'never',
    }],
    'no-use-before-define': 'off',
  },
  settings: {
    'import/resolver': {
      node: {
        path: ['src'],
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
      typescript: {
        alwaysTryTypes: true,
      },
      // 'babel-module': {},
    },
  },
};

到目前为止我尝试过的一些事情 - 在每个都重新启动 vscode/ts 服务器之后

• 更改了路径名称，使其没有@ 作为前缀，没有区别
• 将baseUrl 更改为src 并相应更新路径，没有区别
• 尝试在eslint中使用babel-plugin-module-resolver，没有区别
• 尝试将metro-react-native-babel-preset 与 babel 一起使用，没有区别
• 尝试将 babel.config.js 更改为 .babelrc 和 babel.config.json 文件均无济于事
• 一直在使用tsconfig 设置，但运气不佳

目前我的项目非常简单，只包含从yarn expo init -t expo-template-blank-typescript 下载的样板模板。看起来像

src
  components
    index.ts
    TestButton.tsx
  util
    index.ts
    ThemesProvider.tsx
  index.ts
App.tsx
tsconfig.json
.eslintrc
babel.config.js
...

对此的任何帮助将不胜感激，我想它是非常小的东西，但我已经调整设置一段时间了，不知道设置有什么问题。

Answer 1

我想只是想通了，似乎我只需要从 tsconfig 中删除 include 属性......虽然不确定为什么