React Native - Cannot find module X or its corresponding type declarations

Question

I have recently setup a react native typescript project

I have been trying to get absolute paths working with the setup guide here . But no matter what I seem to do I continually get the error Cannot find module 'X' or its corresponding type declarations TS(2307)

In its current state my tsconfig looks like

{
  "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"
  ]
}

My babel.config.js looks like the following

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,
  };
};

My current eslintrc.js looks like the following

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': {},
    },
  },
};

A few things I have tried so far - after each have been restarting vscode/ts server

• Changed names of paths so that they didn't have @ as a prefix, no difference
• Changed baseUrl to src and updated paths accordingly, no difference
• Tried to use babel-plugin-module-resolver in eslint, no difference
• Tried to use metro-react-native-babel-preset with babel, no difference
• Tried to change babel.config.js to a .babelrc and babel.config.json file neither made a difference
• Been playing around with tsconfig settings for a while and not much luck

My project is very simple at the moment simply consisting of the boilerplate template downloaded from yarn expo init -t expo-template-blank-typescript . Looking something like

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

Any help with this would be greatly appreciated, I imagine it is something super small, but I have been tweaking settings for a while now and have no clue what is wrong with the setup.

Answer 1

刚刚想通了，我想，似乎我只需要从tsconfig删除包含属性......但不确定为什么