ReactJS Cheatsheet

Post Date : 2023-09-28T22:53:54+07:00

Modified Date : 2023-09-28T22:53:54+07:00

Category: reactjs

How to support import alias in vite?

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { fileURLToPath, URL } from "url";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3015,
  },
  resolve: {
    alias: [
      {
        find: "@",
        replacement: fileURLToPath(new URL("./src", import.meta.url)),
      },
    ],
  },
});

Then you can use something like this

import "@/App.css";
import enviroment from "@/shared/environment";
import LinkManagementContainer from "@/containers/LinkManagementContainer";

But it is not enough, you also your editor understand it. Please create a file named “jsconfig.json” and copy the following content.

{
  "compilerOptions": {
    "jsx": "react-jsx", // suport jsx file
    "target": "ES2020",
    // … all other compiler options

    // all paths defined here must match the configured path in `vite.config.ts`
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

reactjs