1 reply

Can't set absolute paths to Vite Project

Hello

I was trying to make sure I could use either typescript

namespace

namespace

s and use absolute file paths for

import

import

statements, as this how-to article suggests.

my

tsconfig.json

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

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?

KP-C

Kevin Powell - Community•2y ago•

1 reply

Thiago R.

Can't set absolute paths to Vite Project

Hello

I was trying to make sure I could use either typescript

namespace

namespace

s and use absolute file paths for

import

import

statements, as this how-to article suggests.

my

tsconfig.json

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

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'

Can't set absolute paths to Vite Project

Can't set absolute paths to Vite Project

Similar Threads

Similar Threads

Similar Threads