Regression: does not work with aliases in an Astro project

[tex0l]

Describe the bug I have a resource I want to import as arraybufer which is located within the directory ./src/resources from my base directory, which is aliased using the tsconfig.json configuration like it is mandated by Astro:

{
  /* ... */
  "compilerOptions": {
    /* ... */
    "baseUrl": ".",
    "paths": { "~/*": [ "src/*" ] },
  }
}

I import it from a file with:

import myResource from '~/resources/my-resource.png?arraybuffer'

To Reproduce See the stackblitz here: https://stackblitz.com/edit/github-5tpg4s?file=src%2Fpages%2Findex.astro

Try to pnpm install && pnpm start, it'll fail with the error ENOENT: no such file or directory, open '~/resources/my-resource.png'

If you roll back to 0.0.2, it'll work.

Expected behavior I would expect the alias to be respected like in 0.0.2.

Additional context Somehow, it works with Astro 3 with vite-plugin-arraybuffer 0.0.7, but not with Astro 4.

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• github-5tpg4s (Open reproduction)

[codeautopilot[bot]]

Potential solution

The bug is caused by the Vite configuration not handling TypeScript path aliases correctly. To solve this, we need to update the Vite configuration to include a plugin that resolves these aliases. Additionally, we need to ensure that the tsconfig.json file is correctly configured with the necessary path aliases.

What is causing this bug?

The bug is caused by the Vite configuration not recognizing the TypeScript path aliases defined in the tsconfig.json file. This leads to an error when trying to import resources using these aliases. The vite.config.ts file does not include any configuration to handle these path aliases, which is why the import fails.

Code

To resolve the issue, follow these steps:

1. Install the vite-tsconfig-paths Plugin: This plugin will allow Vite to recognize and resolve the TypeScript path aliases defined in the tsconfig.json file.

   npm install vite-tsconfig-paths --save-dev
   # or
   yarn add vite-tsconfig-paths --dev

2. Update vite.config.ts: Modify the vite.config.ts file to include the vite-tsconfig-paths plugin.

   import { defineConfig } from "vite";
   import vitePluginArraybuffer from "./src/main";
   import tsconfigPaths from 'vite-tsconfig-paths';
   
   export default defineConfig({
    plugins: [
      tsconfigPaths(),
      vitePluginArraybuffer()
    ],
   });

3. Ensure tsconfig.json is Correctly Configured: Make sure that the tsconfig.json file includes the baseUrl and paths properties to define the path aliases.

   {
    "compilerOptions": {
      "target": "ESNext",
      "useDefineForClassFields": true,
      "module": "ESNext",
      "lib": ["ESNext", "DOM"],
      "moduleResolution": "Node",
      "strict": true,
      "sourceMap": true,
      "resolveJsonModule": true,
      "isolatedModules": true,
      "esModuleInterop": true,
      "noEmit": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "noImplicitReturns": true,
      "skipLibCheck": true,
      "baseUrl": ".",
      "paths": {
        "~/*": ["src/*"]
      }
    },
    "include": ["src"]
   }

How to replicate the bug

1. Set up an Astro project with the provided tsconfig.json and vite.config.ts files.
2. Define a path alias in the tsconfig.json file.
3. Try to import a resource using the defined alias in one of your project files.
4. Run the project using pnpm install && pnpm start.
5. Observe the error ENOENT: no such file or directory, open '~/resources/my-resource.png'.

By following the steps above, you should be able to replicate the bug. After applying the suggested solution, the import should work correctly without any errors.

This solution ensures that Vite can resolve TypeScript path aliases, thereby fixing the import issue described in the ticket.

Click here to create a Pull Request with the proposed solution

Files used for this task:

Changes on vite.config.ts

# Analysis Report for `vite.config.ts` ## Overview The `vite.config.ts` file is responsible for configuring Vite, a build tool that is often used in modern web development projects. In this specific configuration, the file imports and uses a plugin named `vitePluginArraybuffer`. ## Configuration Details The current configuration is minimal and includes the following: - Importing the `defineConfig` function from Vite. - Importing a custom plugin `vitePluginArraybuffer` from the local `./src/main` path. - Exporting a default configuration object that includes the `vitePluginArraybuffer` plugin. ```ts import { defineConfig } from "vite"; import vitePluginArraybuffer from "./src/main"; export default defineConfig({ plugins: [vitePluginArraybuffer()], }); ``` ## Potential Issue The issue described in the ticket indicates that path aliases defined in `tsconfig.json` are not being respected, leading to an error when trying to import a resource using an alias. ### Missing Path Alias Handling The current `vite.config.ts` does not include any configuration to handle TypeScript path aliases. Vite requires additional setup to recognize and resolve these aliases correctly. ## Suggested Solution To resolve the issue, you need to add a Vite plugin that handles TypeScript path aliases. One commonly used plugin for this purpose is `vite-tsconfig-paths`. ### Steps to Fix 1. **Install the Plugin**: You need to install the `vite-tsconfig-paths` plugin. You can do this using npm or yarn: ```sh npm install vite-tsconfig-paths --save-dev # or yarn add vite-tsconfig-paths --dev ``` 2. **Update `vite.config.ts`**: Modify the `vite.config.ts` file to include the `vite-tsconfig-paths` plugin. ```ts import { defineConfig } from "vite"; import vitePluginArraybuffer from "./src/main"; import tsconfigPaths from 'vite-tsconfig-paths'; export default defineConfig({ plugins: [ tsconfigPaths(), vitePluginArraybuffer() ], }); ``` ## Conclusion The current `vite.config.ts` file does not handle TypeScript path aliases, which is likely causing the issue described in the ticket. By adding the `vite-tsconfig-paths` plugin, Vite will be able to resolve the path aliases defined in `tsconfig.json`, potentially resolving the import error. This concludes the analysis for the `vite.config.ts` file. Further investigation into the `tsconfig.json` file is recommended to ensure that the path aliases are correctly defined there as well.

Changes on tsconfig.json

# Analysis Report ## File: `tsconfig.json` ### Current Configuration ```json { "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "module": "ESNext", "lib": ["ESNext", "DOM"], "moduleResolution": "Node", "strict": true, "sourceMap": true, "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "noEmit": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "skipLibCheck": true }, "include": ["src"] } ``` ### Observations 1. The `compilerOptions` section is missing the `baseUrl` and `paths` properties which are necessary for defining path aliases. 2. The `include` section is correctly set to include the `src` directory. ### Required Changes To ensure that the path aliases are correctly defined, the `tsconfig.json` file should include the `baseUrl` and `paths` properties as described in the issue. ### Updated Configuration ```json { "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "module": "ESNext", "lib": ["ESNext", "DOM"], "moduleResolution": "Node", "strict": true, "sourceMap": true, "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "noEmit": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "skipLibCheck": true, "baseUrl": ".", "paths": { "~/*": ["src/*"] } }, "include": ["src"] } ``` ### Conclusion The missing `baseUrl` and `paths` properties in the `tsconfig.json` file are likely causing the issue with the path alias resolution. Adding these properties should resolve the problem. ### Next Steps 1. Update the `tsconfig.json` file with the above configuration. 2. Verify if the issue persists after making the changes. This file is relevant to the bug, and the changes suggested should be implemented to potentially resolve the issue. The next agent should look into the `vite.config.ts` file to ensure that Vite is configured to handle these path aliases correctly.

_Disclaimer: This comment was entirely generated using AI. Be aware that the information provided may be incorrect._ Current plan usage: 41.61% **Have feedback or need help?** [Discord](https://discord.gg/r72ykfvyx7) [Documentation](https://docs.codeautopilot.com/) [support@codeautopilot.com](mailto:support@codeautopilot.com)

[tachibana-shin]

Astro has upgraded their vite so a few APIs have changed. I will fix it tomorrow

[tachibana-shin]

Fixed on vite-plugin-arraybuffer@0.0.8