0

When i try to import component like this import { Container } from '@/components/container/Container';

It shows me error: Module not found: Error: Can't resolve '@/components/container/Container'

This is my tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "typeRoots": ["node_modules/@types"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/public/*": ["./public/*"]
    }
  },
  "exclude": ["node_modules"],
  "include": ["typings.d.ts"],
}

react version is 18

How to solve problem, so i want to use @ instead of ..

I try to make all paths look like alias @ to ./src path

Hanzo Hattori
  • 1
  • 1
  • 1
    Do you have webpack or something similar? is that configured? – Lith Jun 06 '23 at 18:13
  • i am using create react app, so i don't want to eject project to configure webpack – Hanzo Hattori Jun 07 '23 at 03:25
  • for create-react-app can use this post as an answer to what needs to be configured https://stackoverflow.com/questions/63067555/how-to-make-an-import-shortcut-alias-in-create-react-app – Lith Jun 07 '23 at 16:31

1 Answers1

1

If you want to make your life easier You can install these two modules react-app-rewired react-app-rewire-alias These handle all your alias problems.

I saw a beautiful written post on this tutorial on medium

https://medium.com/how-to-react/create-path-aliases-in-react-js-1256550c7d52

Check out the post it has very clear steps

Be1newinner
  • 11
  • 2