Module not found: Can't resolve 'components/Card Container/CardContainer' in 'D:\FoodOderingApp\Client\screens\Item Listing'

Question

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

file Structure

• Client
• components
  - Header
• Helper
• navigation
• screens
• state

I can't find the module even I can click on my particular .tsx file

Answer 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/**/*"]
  }
}

When you do want to import, you can do it in two ways.

1. With *

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

Import:

import ItemListing from '@screen/'

2. If we remove * from the path

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

Then you can import like this:

import ItemListing from '@screen'