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

Question

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

我一直在尝试使用此处的设置指南获得绝对路径。 但无论我似乎做什么，我都会不断收到错误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删除包含属性......但不确定为什么