未找到模块：无法解析“D:\FoodOderingApp\Client\screens\Item Listing”中的“components/Card Container/CardContainer”答案

【问题标题】：Module not found: Can't resolve 'components/Card Container/CardContainer' in 'D:\FoodOderingApp\Client\screens\Item Listing'未找到模块：无法解析“D:\FoodOderingApp\Client\screens\Item Listing”中的“components/Card Container/CardContainer”
【发布时间】：2021-03-27 05:59:55
【问题描述】：

{
  "compilerOptions": {
    "target": "es6",
    "strictNullChecks": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noEmit": true,
    "skipLibCheck": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "strict": true,
    "baseUrl": "./",
    "types": ["node"],
    "paths": {
      "helper/*": ["Helper/*"],
      "header/*": ["components/Header/*"],
      "components/*": ["components/*"],
      "navigation/*": ["navigation/*"],
      "screens/*": ["screens/*"],
      "states/*": ["State/*"]
    },
    "include": ["./Client/**/*"]
  }
}

文件结构

客户
组件
- 标题
帮手
导航
屏幕
状态

即使我可以点击我的特定 .tsx 文件，我也找不到该模块

【问题讨论】：

标签： typescript tsconfig-paths

【解决方案1】：

{
  "compilerOptions": {
    "outDir": "../public",
    "module": "esnext",
    "target": "es5",
    "sourceMap": true,
    "noEmit": true,
    "skipLibCheck": true,
    "allowJs": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "baseUrl": "./",
    "rootDir": "./",
    "typeRoots": ["./node_modules/@types", "./src/@types"],
    "paths": {
      "@helper/*": ["Helper/*"],
      "@header/*": ["components/Header/*"],
      "@components/*": ["components/*"],
      "@navigation/*": ["navigation/*"],
      "@screens/*": ["screens/*"],
      "@states/*": ["State/*"]
    },
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "importsNotUsedAsValues": "preserve",
    "include": ["./Client/**/*"]
  }
}

当您确实要导入时，可以通过两种方式进行。

与*

 "@screens/*":["screens/*"],

进口：

import ItemListing from '@screen/'

如果我们从路径中删除*

 "@screens/":["screens/*"],

然后你可以像这样导入：

import ItemListing from '@screen'

【讨论】：