KPC
Kevin Powell - Community•14mo ago
Thiago R.

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.
Thiago R.OP•14mo 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

Did you find this page helpful?