What am I doing wrong with these Paths?

[storm nest]

// tsconfig.json
{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        "noImplicitAny": false,
        "baseUrl": "./",
        "paths": {
            "$/*": ["./src/*"],
            "components/*": ["./src/components/*", "./src/components"],
            "assets/*": ["./src/assets/*", "./src/assets"],
            "views/*": ["./src/views/*", "./src/views"],
            "apis*": ["./src/apis/*", "./src/apis"]
        }
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

// views/index.tsx
import Layout from "components/Layout/Layout";
const IndexPage: React.FC = () => {

    return (
        <Layout>
            <h1>Hello!</h1>
        </Layout>

    )
}

export default IndexPage;

[queen kettle]

!:paths-are-not-magic

[celest lagoon]

tjjfvi#0

`!t6:paths-are-not-magic`:

The paths and baseUrl compiler options don't cause any remapping of imports paths, they only inform TS of existing mappings, which you'll have to setup with some other tool.

baseUrl is a pretty well-supported option (e.g. using the NODE_PATH environment variable with node or resolve.modules with webpack).
paths can be trickier to setup, (especially with node see this for node), and you may find it to not be worth the effort.

[queen kettle]

since you're using vite you should be able to get it to compile your aliases by setting the resolve.alias option: https://vitejs.dev/config/shared-options.html#resolve-alias

[storm nest]

That's the thing, i also did do that while debugging further and it still didn't work

Check this out

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// import path from "node:path";

// https://vitejs.dev/config/
export default defineConfig({
    // resolve: {
    //     alias: {
    //         "@src": path.resolve(__dirname, "./src"),
    //         "@assets": path.resolve(__dirname, "./src/assets"),
    //         "@components": path.resolve(__dirname, "./src/components"),
    //         "@services": path.resolve(__dirname, "./src/services"),
    //         "@views": path.resolve(__dirname, "./src/views"),
    //     },
    // },
    plugins: [react()],
});

// new tsconfig.json
{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        "noImplicitAny": false
        // "baseUrl": "./"
        // "paths": {
        //     "@src/*": ["src/*"],
        //     "@assets/*": ["src/assets/*", "src/assets"],
        //     "@components/*": ["src/components/*", "src/components"],
        //     "@services/*": ["src/services/*", "src/services"],
        //     "@views/*": ["src/views/*", "src/views"]
        // }
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

I tried moving aorund the base url, I tried changing how I called the paths when importing, and it would always give me the same error