Как использовать псевдонимы (alias) в Laravel + React + Typescript?

Question

[JeanPaulBelmondo]

Алиасы прекрасно настраиваются на:
- обычным реакт приложении;
- c laravel без typescript;

если же использовать Laravel + React + Typescript - код работает, но редактор подсвечивает все импорты красным.

Мой tsconfig

{
    "compilerOptions": {
        "target": "esnext",
        "lib": [
            "DOM",
            "ES2021.String"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "allowSyntheticDefaultImports": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "noEmit": true,
        "jsx": "react-jsx",
        "sourceMap": true,
        "strict": true,
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "strictFunctionTypes:": false,
        "baseUrl": "./js"
    },
    "include": ["resources/js"]
}

Мой вебпак

require('dotenv').config();
const path = require('path');
const mix = require('laravel-mix');
const tailwindcss = require("tailwindcss");

mix.ts('resources/js/main/index.tsx', 'public/js/main')
    .react()
    .postCss("resources/css/app.css", "public/css", [
        tailwindcss,
    ]);

mix.webpackConfig({
    output: {
        publicPath: "/",
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js'],
        alias: {
          'external': path.join(__dirname, 'resources/js/external')
        },
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: "babel-loader",
            exclude: /node_modules/,
            options: {
                presets: ["@babel/preset-react", "@babel/preset-typescript"],
            },
        },],
    },
});

куда смотреть? что делать?

Answer 1

[Антон Антон]

"compilerOptions": {
...
    "baseUrl": "resources/js",
    "paths": {
      "external": ["resources/js/external"]
    }
  },