First - tell to IDE about aliases in tsconfig.json:

create separate file tsconfig.paths.json and add aliases:

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

Add created tsconfig.paths.json to main tsconfig.json

{
   "extends": "./tsconfig.paths.json",
   ... other staff ...
}

Second - tell to webpack about aliases:

Add aliases to config-overrides.js

const {
   override,
   addWebpackAlias
} = require('customize-cra');

const path = require("path");

module.exports = override(
   addWebpackAlias({
      "@utils": path.resolve(__dirname, "./src/utils"),
   }),
);

my craco.config.js look likes below, it works:

const path = require('path');

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

Just keep your file craco.config.js just like this, and you need to add 1 more file with named jsconfig.json

it's content:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2016",
    "jsx": "preserve",
    "checkJs": true,
    "baseUrl": "./src/",
    "paths": {
      "@app/*": ["./*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

then you can import from the absolute path like @app/FilterComment.js

It also worked for VSCode (editor now understand where @app point to). But if you want VSCode to do the import automatically, then you should add more config for it to force it always do the import from absolute path.

file .vscode/settings.json content:

{
  "javascript.preferences.importModuleSpecifier": "non-relative"
}

Maybe the OP had a different version of React / Webpack (I'm using today's current versions), but putting the alias object directly inside the webpack object (without nesting it in the resolve object) did the trick for me:

const path = require("path");

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

An example (which I'm using) without using dependency:

//craco.config.js
const path = require('path')

const tsconfig = require('./tsconfig.base.json')

const removeAsterisk = path => path.replace('/*', '')

const aliasProps = Object.entries(tsconfig.compilerOptions.paths).map(([key, value]) => {
  const newKey = removeAsterisk(key)
  let newValue = removeAsterisk(value[0])
  newValue = path.resolve(__dirname, newValue)
  return [newKey, newValue]
})

const alias = Object.fromEntries(aliasProps)

module.exports = {
  webpack: {
    alias,
  },
}

//tsconfig.base.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"],
      //...
    }
  }
}

// tsconfig.json
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {/*...*/}
}

Use react-app-alias:

• Install craco and react-app-alias and create craco config:

// craco.config.js
const {CracoAliasPlugin} = require('react-app-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {}
    }
  ]
}

Replace react-scripts with craco in package.json.

Create typescript config and alias in separated config like this:

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "example/*": ["example/src/*"],
      "@app/*": ["app/src/*"]
    }
  }
}

// tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  // ...
}

Now you can do import like this:

   import App from '@app/App'

I am using craco-alias plugin for automatic aliases generation for Webpack and Jest. (I am just an intern but that's how senior developers in my company are using absolute imports in react)

Install

yarn add @craco/craco
yarn add craco-alias

craco.config.js

const CracoAlias = require('craco-alias');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: './src',
        tsConfigPath: './tsconfig.paths.json', // or wherever you have defined your paths
      },
    },
  ],
};

And make sure that you scripts in package.json look like the following

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject",
    ...
  },

Then It'll work as specified in tsconfig.json.

FYI I have, "react-scripts": "4.0.3" "@craco/craco": "^6.3.0" "craco-alias": "^3.0.1"