Kevin Powell - Community•2mo ago

Can't set absolute paths to Vite Project

Hello I was trying to make sure I could use either typescript namespaces and use absolute file paths for import statements, as this how-to article suggests. my tsconfig.json file is as follows:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["./src/*"],
      "@data/*": ["./src/data/*"],
      "@views/*": ["./src/views/*"],
      "@services/*": ["./src/services/*"]
    }
  }
}

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["./src/*"],
      "@data/*": ["./src/data/*"],
      "@views/*": ["./src/views/*"],
      "@services/*": ["./src/services/*"]
    }
  }
}

Also, my vite.config.ts file is as follows:

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
                                plugins: [react(), tsconfigPaths()],
                                resolve: {
                                    alias: {
                                        '@src': '/src',
                                        '@data': '/src/data',
                                        '@views': '/src/views',
                                        '@services': '/src/services',
                                    },
                                },
                            });

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
                                plugins: [react(), tsconfigPaths()],
                                resolve: {
                                    alias: {
                                        '@src': '/src',
                                        '@data': '/src/data',
                                        '@views': '/src/views',
                                        '@services': '/src/services',
                                    },
                                },
                            });

However, if I try to use the absolute paths like the following:

import { ErrorPage }              from 'src/views/pages'

import { ErrorPage }              from 'src/views/pages'

For instance, the project is a react/tsx game catalogue. The mentioned files are already committed there. The editor doesn't recognize it. For instance, I'm using Jetbrains Webstorm. Has anyone here ever have been through this situation?

1 Reply

Thiago R.OP•2mo ago

For those who might encounter the same issue as me, you must do the followng: Add the same "compilerOptions" configuration of tsconfig.json to tsconfig.app.json

Gaming

Programming

Can't set absolute paths to Vite Project