TSConfig path aliases are not respected

[Sv443]

I'm using the plugin vite-tsconfig-paths to make vite use the path aliases defined in compilerOptions.paths in tsconfig.json
With this vite userscript plugin it worked fine, but after switching to your plugin I get the error [vite]: Rollup failed to resolve import "@utils/plugin.js"

I'm using the aliased imports like this:

Click to expand my vite.config.ts

import "dotenv/config";
import { defineConfig, Plugin } from "vite";
import { execSync } from "child_process";
import tsConfigPathsPlugin from "vite-tsconfig-paths";
import monkeyPlugin from "vite-plugin-monkey";
import packageJson from "./package.json" with { type: "json" };

const { author, homepage, namespace, repository, userscriptName, version } = packageJson;

/**
 * Default port of the dev server.  
 * First tries to use the port specified by the "--port" argument, then the "DEV_SERVER_PORT" environment variable, and finally falls back to this value.
 */
export const defaultPort = 8767;
/**
 * Default repository (in the format "User/Repo") to use for all URLs that point to the repository.  
 * First tries to resolve the repository URL from `repository.url` in "package.json", then falls back to this value.
 */
export const defaultRepo = "Sv443/BetterYTM-Plugin-Template";


const repo = repository.url.match(/github.com\/(.+?\/.+?)\//)?.[1] ?? defaultRepo;

const cliPortRaw = Number(process.argv.find(arg => arg.startsWith("--port="))?.split("=")[1]);
const envPortRaw = Number(process.env.DEV_SERVER_PORT);
/** HTTP port of the dev server */
const devServerPort = !isNaN(cliPortRaw)
  ? cliPortRaw
  : (
    !isNaN(envPortRaw)
      ? envPortRaw
      : defaultPort
  );


export default defineConfig(({ mode }) => {
  const buildNbr = getCommitSha();

  return {
    build: {
      minify: false,
    },
    plugins: [
      tsConfigPathsPlugin({
        root: import.meta.dirname,
      }),
      replaceStringsPlugin({
        "#{{BUILD_MODE}}": mode,
        "#{{BUILD_NUMBER}}": buildNbr,
      }),
      monkeyPlugin({
        entry: "src/index.ts",
        userscript: {
          name: userscriptName,
          namespace,
          version,
          // necessary to make sure the plugin is registered in time and can make proper use of all API features:
          "run-at": "document-start",
          author: author.name,
          connect: [
            "i.ytimg.com",
            "youtube.com",
            "github.com",
          ],
          copyright: `Copyright ${new Date().getFullYear()} ${author.name}`,
          description: "This is an example plugin for BetterYTM - https://github.com/Sv443/BetterYTM",
          homepageURL: homepage,
          supportURL: packageJson.bugs.url,
          grant: [
            "unsafeWindow", // necessary for interacting with the BYTM API
            // these are commonly used - add or remove as needed:
            // "GM.getResourceURL",
            // "GM.getResourceText",
            // "GM.setValue",
            // "GM.getValue",
            // "GM.deleteValue",
            // "GM.openInTab",
          ],
          // don't run in iframes:
          noframes: true,
          match: [
            "https://youtube.com/*",
            "https://music.youtube.com/*",
          ],
          icon: getResourceUrl(mode, "assets/plugin_icon_128x128.png", buildNbr),
          resource: {
            icon_1000: getResourceUrl(mode, "assets/plugin_icon_1000x1000.png", buildNbr),
            icon_128: getResourceUrl(mode, "assets/plugin_icon_128x128.png", buildNbr),
          },
        },
      }),
    ],
  };
});

/** Replaces strings in the bundle with other strings. */
function replaceStringsPlugin(options: Record<string, string>): Plugin {
  return {
    name: "vite-plugin-custom-replace-strings",
    transform(code, _id) {
      for(const [searchValue, replaceValue] of Object.entries(options)) {
        const regex = new RegExp(searchValue, "gm");
        code = code.replace(regex, replaceValue);
      }
      return { code };
    }
  };
}

/**
 * Returns the commit sha of the latest commit for use as a build number.  
 *   
 * ⚠️ Important: This will always trail behind the current commit by one, as the act of committing this number will also change it.  
 * If your script depends on this number (for example for versioned GitHub asset URLs), you should always commit your build separately and last.
 */
function getCommitSha() {
  try {
    return execSync("git rev-parse --short HEAD").toString().trim();
  }
  catch {
    console.error("\x1b[31mFailed to get the commit SHA. Is Git installed?\x1b[0m\nFalling back to 'BUILD_ERROR'.");
    return "BUILD_ERROR";
  }
}

/**
 * Returns the URL to a resource.  
 * In `development` mode, the resource is served by the dev server.  
 * In `production` mode, the resource is fetched using the given commit SHA or branch name (`main` by default).
 * @param mode `development` or `production`, defaults to `development`
 * @param path The path to the resource relative to the repository root
 * @param buildNbrOrBranch The build number or branch name to use in the URL, defaults to `main` - this is very useful for versioned asset URLs, which will never break by changes made to the `main` branch.
 */
function getResourceUrl(mode: string, path: string, buildNbrOrBranch: string = "main") {
  if(path.startsWith("/"))
    path = path.slice(1);

  return mode === "development"
    ? `http://localhost:${devServerPort}/${path}`
    : `https://raw.githubusercontent.com/${repo}/${buildNbrOrBranch}/${path}`;
}

[lisonge]

Can you provide a link to a reproducible repository?

[Sv443]

Sure, it's this repo: https://github.com/Sv443/BetterYTM-Plugin-Template
(follow the setup section, it needs an initialized git submodule to work (also step 5 isn't needed for building))

[lisonge]

Is your computer system Windows?

---

I find some similar issues.

https://github.com/aleclarson/vite-tsconfig-paths/issues?q=is%3Aissue+Rollup+failed+to+resolve+import

Adding a line of code should fix this issue.

[lisonge]

I can build it normally in the Linux environment since Linux paths do not contain the backslash character \ unique to Windows, so this error does not occur.

[Sv443]

You're right, it works when I use WSL2, but it still doesn't explain why it worked with another vite plugin for building userscripts.
Also thanks for forwarding the issue to vite-tsconfig-paths!

[lisonge]

change your entry "src/index.ts" to normalizePath(process.cwd()+'/src/index.ts') will solve it

---

it works when I use WSL2, but it still doesn't explain why it worked with another vite plugin for building userscripts.

[Sv443]

Yup that worked, thanks a bunch!

[lisonge]

it works when I use WSL2, but it still doesn't explain why it worked with another vite plugin for building userscripts.

becase greasify/vite-userscript-plugin and vite-plugin-monkey@2 use viteConfig.build.lib.entry

It has some limitations, vite build your code as Library instead of Web Application

so vite-plugin-monkey@>=3 use viteConfig.build.rollupOptions.input

[Sv443]

Okay so I've just discovered a new problem that's probably related to this. When importing a namespaced library that starts with an @, I get the same error. Do you know if your PR fixes this too?

[lisonge]

you can test it just change resolversByDir[projectDir] to resolversByDir[normalizePath2(projectDir)] in the line 162 of node_modules/vite-tsconfig-paths/dist/index.js

[Sv443]

Perfect, much thanks again!