🐛 BUG: Importing the astro.config.mjs file in a js/.jsx causes problems when using vite-imagetools

[RafidMuhymin]

What version of astro are you using?

0.21.12

What package manager are you using?

yarn

What operating system are you using?

Ubuntu

Describe the Bug

I am facing the following issue when importing the astro.config.mjs file inside a .js|.jsx file when using vite-imagetools.

Interestingly the problem doesn't happen in .astro component or even inside .ts|.tsx files/components. It doesn't matter whether you import the file into a component or not (Vite checks for import statements inside the complete project, so it's normal I think).

You can solve the problem either by removing the import or by adding vite-imagetools to the vite.optimizeDeps.exclude array.

So, what I think is, maybe the default config set by Vite (or Astro) is ignored when you import the astro.config.mjs file inside a .js|.jsx file. It doesn't matter whether you use vite-imagetools or not. I think in my case I am receiving the error because the default setting excluded the imported plugins from optimization automatically. As a result, it was able to avoid the fact that ESBuild doesn't support loading .node files. So, a regular user may not experience this issue when importing the config file.

(The below reproduction won't work until you clone it into your machine as StackBlitz doesn't support sharp)

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ap7kc8?file=src%2Fscripts%2FimportConfig.js

[jonathantneal]

Interesting. I’m not sure how Vite handles Node binary add-ons, but perhaps this can be configured. @natemoo-re, would you know?

[RafidMuhymin]

Interesting. I’m not sure how Vite handles Node binary add-ons, but perhaps this can be configured. @natemoo-re, would you know?

@jonathantneal Vite uses ESBuild to optimize the dependencies, and ESBuild doesn't support loading .node files by default. So, if it tries to load vite-imagetools or a similar package it'll definitely fail. But when you add the package to your package dependencies. It'll simply ignore importing it. But when I am importing the config file in a .js|.jsx file I think this default behavior is getting broken.

[RafidMuhymin]

So, I think to get rid of these weird behaviors we can simply add a loader for .node files as described in this issue evanw/esbuild#1051 (comment). Maybe adding this won't make sharp work but it'll fix these types of problems for other packages that load .node files.

[tony-sull]

Hey, this issue is out of date and may have been fixed in the latest version of Astro. If you can still reproduce the issue with the latest version of astro (npm install astro@next) please open a new issue and we can take a deeper look. 👍

We think this one is actually likely handled by the Vite upgrade included in astro@next, it's also very related to the RFC for Asset Primitives which is heavily focused on how we'll handle importing assets at build time as part of SSR support 👍