Laravel Mix + Typescript tsconfig.json Alias to resources/js configuration not working

Question

I have a Laravel 8 Project where i am using typescript. I am unable to get the alias to the root of resources.js working. Here are the errors i am getting :

ERROR in ./resources/js/components/TestComponent/test.tsx 65:16-34
Module not found: Error: Can't resolve 'helpers' in '/Users/codenathan/code/demo/resources/js/components/TestComponent'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx"]'?

ERROR in ./resources/js/components/TestComponent/test.tsx 66:30-72
Module not found: Error: Can't resolve 'components/TestComponent2/test2' in '/Users/codenathan/code/demo/resources/js/components/TestComponent'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx"]'?

ERROR in /Users/codenathan/code/demo/resources/js/components/TestComponent/test.tsx
./resources/js/components/TestComponent/test.tsx 2:31-40
[tsl] ERROR in /Users/codenathan/code/demo/resources/js/components/TestComponent/test.tsx(2,32)
      TS2307: Cannot find module 'helpers' or its corresponding type declarations.

ERROR in /Users/codenathan/code/demo/resources/js/components/TestComponent/test.tsx
./resources/js/components/TestComponent/test.tsx 3:27-60
[tsl] ERROR in /Users/codenathan/code/demo/resources/js/components/TestComponent/test.tsx(3,28)
      TS2307: Cannot find module 'components/TestComponent2/test2' or its corresponding type declarations.

This is what my webpack.mix.js looks like so far, without the components alias all the tsx files are failing to recognise :

const mix = require('laravel-mix');
const path = require('path');

mix.alias({
        '@': path.resolve('resources/js'),
})

mix.js('resources/js/app.js', 'public/js')
    .ts('resources/js/components/TestComponent/test.tsx', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]).react();

my tsconfig.json

{
    "compilerOptions": {
        "outDir": "lib",
        "sourceMap": true,
        "noImplicitAny": false,
        "module": "commonjs",
        "lib": [
            "dom",
            "dom.iterable"
        ],
        "downlevelIteration": true,
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "baseUrl": ".",
        "paths": {
           "*": ["resources/js"],
        }
    },
    "include": [
        "./resources/js/**/*.ts",
        "./resources/js/**/*.tsx",
    ]
}

This is my folder structure under resources/js

.
├── app.js
├── bootstrap.js
├── components
│   ├── TestComponent
│   │   └── test.tsx
│   └── TestComponent2
│       └── test2.tsx
└── helpers.ts

Test Component

import React, { useState } from 'react';
import { incrementCount } from 'helpers';
import TestComponent2 from 'components/TestComponent2/test2';

interface TestComponentProps {
    initialCount: number;
}

const TestComponent: React.FC<TestComponentProps> = ({ initialCount }) => {
    const [count, setCount] = useState(initialCount);

    const handleButtonClick = () => {
        setCount(incrementCount(count));
    };

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={handleButtonClick}>Increment</button>
            <TestComponent2 message="Hello from TestComponent2" /> {/* Use TestComponent2 */}
        </div>
    );
};

export default TestComponent;

and this is TestComponent 2

import React from 'react';

interface TestComponent2Props {
    message: string;
}

const TestComponent2: React.FC<TestComponent2Props> = ({ message }) => {
    return (
        <div>
            <h2>{message}</h2>
        </div>
    );
};

export default TestComponent2;

export const incrementCount = (count: number): number => {
    return count + 1;
};

Can anyone why the alias inside the tsconfig.json or the laravel mix.alias to the root of resouces/js are not working?

I DO NOT:

want to setup an alias for components folder. i want all the files to be relative to the root "resources/js" i don't mind even doing an @ alias but thats not working either

and yes i need this components in separate js files as opposed to the app.js / app.tsx

I have tried to change the tsconfig.json file and webpack.mix.js file several ways but i cannot get it to work

Answer 1

I eventually did this and it worked :

mix.alias({
'helpers': path.resolve(__dirname, 'resources/js/helpers'),
'components' : path.resolve(__dirname, 'resources/js/components'),
})

I am still unsure why it wouldn't read the root path from the tsconfig.json