Alias error

[msamiluludag]

I don't know what I'm missing, but I couldn't fix this alias error. When I create a project using pnpm create vite@latest and make the similar configs, no errors occur.

[vite] Internal server error: Failed to resolve import "@/style.css" from "entrypoints/popup/main.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: C:/Users/samil/Desktop/ext-dd/entrypoints/popup/main.tsx:4:7
  3  |  import ReactDOM from "react-dom/client";
  4  |  import App from "./App.tsx";
  5  |  import "@/style.css";
     |          ^
  6  |  ReactDOM.createRoot(document.getElementById("root")).render(

wxt.config.ts

import { defineConfig } from "wxt";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

// See https://wxt.dev/api/config.html
export default defineConfig({
  vite: () => ({
    plugins: [react()],
    resolve: {
      alias: [
        {
          find: "@",
          replacement: resolve(__dirname, "./entrypoints/popup"),
        },
      ],
    },
  }),
});

tsconfig.json

{
  "extends": "./.wxt/tsconfig.json",
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./entrypoints/popup/*"]
    }
  }
}

Folder structure

[aklinker1]

Don't set paths in your tsconfig file. They clash with the paths defined in .wxt/tsconfig.json. instead, set them in the WXT config:

https://wxt.dev/api/wxt/interfaces/InlineConfig.html#alias

import { defineConfig } from "wxt";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

// See https://wxt.dev/api/config.html
export default defineConfig({
  alias: {
    '@': './entrypoints/popup'
  },
  vite: () => ({
    plugins: [react()],
  }),
});

That said, I've never tried overriding the @ alias and don't know if that will work... I recommend using something like this instead: 'popup': './entrypoints/popup'

[msamiluludag]

Thanks for the answer. Your recommendation worked perfectly.