How to use typescript path aliases in my Create React App Typescript Eslint project?

Question

I used this template project https://github.com/kristijorgji/cra-ts-storybook-styled-components and upgraded some libs.

package.json looks like

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "homepage": "/",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "storybook dev -p 6006 -s public",
    "build-storybook": "storybook build -s public",
    "lint:eslint": "eslint --ext js,jsx,ts,tsx src",
    "lint:prettier": "prettier --check \"src/**/*.*\"",
    "lint": "yarn lint:eslint && yarn lint:prettier",
    "fix:eslint": "eslint --fix --ext js,jsx,ts,tsx src",
    "fix:prettier": "prettier --write './src/**/*.{ts,tsx,json,js}'",
    "fix": "yarn fix:eslint && yarn fix:prettier"
  },
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@mui/icons-material": "^5.11.0",
    "@mui/lab": "^5.0.0-alpha.113",
    "@mui/material": "^5.11.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.15.0",
    "react-scripts": "^5.0.1",
    "styled-components": "^5.2.1",
    "typescript": "^5.0.2",
    "web-vitals": "^3.4.0"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^7.4.0",
    "@storybook/addon-essentials": "^7.4.0",
    "@storybook/addon-links": "^7.4.0",
    "@storybook/node-logger": "^7.4.0",
    "@storybook/preset-create-react-app": "^7.4.0",
    "@storybook/react": "^7.4.0",
    "@storybook/react-webpack5": "^7.4.0",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^15.0.5",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.12",
    "@types/node": "^20.12.7",
    "@types/react": "^18.3.1",
    "@types/react-dom": "^18.3.0",
    "@types/react-router-dom": "^5.3.3",
    "@types/styled-components": "^5.1.4",
    "eslint": "^8.48.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-storybook": "^0.6.13",
    "prettier": "^3.0.3",
    "storybook": "^7.4.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I want to use typescript path aliases and did the following steps:

I changed tsconfig.json to have

    "baseUrl": ".",
    "paths": {
      "@/c/*": ["src/c/*"]
    }

Full tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "noImplicitAny": false,
    "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",
    "baseUrl": ".",
    "paths": {
      "@/c/*": ["src/c/*"]
    }
  },
  "include": [
    "src"
  ]
}

yarn add -D eslint-import-resolver-typescript
I modified .eslint.js to have settings for the resolver

module.exports = {
    extends: [
        'react-app',
        'react-app/jest',
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:import/errors',
        'plugin:import/warnings',
        'plugin:import/typescript',
        'plugin:prettier/recommended',
        'plugin:storybook/recommended',
    ],
    rules: {
        // Include .prettierrc.js rules
        'prettier/prettier': ['error', {}, { usePrettierrc: true }],

        'react/display-name': 'warn',
        'import/no-anonymous-default-export': 'off',
        '@typescript-eslint/ban-ts-comment': 'off',
        '@typescript-eslint/no-non-null-assertion': 'off',
    },
    settings: {
        'import/resolver': {
            typescript: {},
        },
    },
};

This is not working I do get error Module not found: Error: Can't resolve '@/c/services/api' in somepath

Any idea how to achieve this ?

PS: This configuration works great in NextJS. I am using typescript path aliases there, I can build and also eslint recognizes them

Kristi Jorgji · Accepted Answer · 2024-05-02 14:48:35Z

I tried react-rewire-app without success.

I solved this with craco in the end

In addition to the steps mentioned in my question, I also did the following:

1 yarn add -D @craco/craco

2 add craco.config.js

const path = require('path');

module.exports = {
    webpack: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
    },
};

create tsconfig.paths.js

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/c/*": ["src/c/*"]
    }
  }
}

modify tsconfig.json to extend the paths one above

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "noImplicitAny": false,
    "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"
  },
  "include": [
    "src"
  ],
  "extends": "./tsconfig.paths.json"
}

replace in package.json the following scripts

    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject",

use the eslintrc.js from my question

Collectives™ on Stack Overflow

How to use typescript path aliases in my Create React App Typescript Eslint project?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related