DEV Community

Discussion on: How to setup pretty import paths in a create-react-app application

Collapse
 
ultralabsgev profile image
ultralabsgev

can someone pls explain to me why i still getting error when i'm using

import SomeComponent from '@baseComponents/SomeComponent';

this is my error
 Unable to resolve path to module '@baseComponents/SomeComponent'
Enter fullscreen mode Exit fullscreen mode

this is part of my esLint

"settings": {
    "import/resolver": {
      "alias": {
        "map": [["@", "./src"], ["@baseComponents", "./src/components/Base/*"]],
        "extensions": [".ts", ".tsx", ".js", ".jsx", ".json"]
      },
    }
  }
Enter fullscreen mode Exit fullscreen mode

and this is part of my craco.config

  webpack: {
    alias: {
      '@convertor': path.resolve(__dirname, `src/convertors`),
      '@baseComponents': path.resolve(__dirname, `src/components/Base`),
    },
  },
  jest: {
    configure: {
      moduleNameMapper: {
        '^@baseComponents(.*)$': '<rootDir>/src/components/Base',
      },
    },
  },
Enter fullscreen mode Exit fullscreen mode

this is tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@baseComponents/*": [ "src/components/Base/*" ],
      "@convertor/*": [ "src/convertors/*" ],
    }
  }
}
Enter fullscreen mode Exit fullscreen mode