Vite does not resolve deps well in a mono-repo

[louiss0]

Astro Info

Astro                    v3.6.3
Node                     v20.7.0
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Issue with Extraneous Deps

When I was building I saw this error in my logs.

[plugin:vite:resolve] Module "util" has been externalized for browser compatibility, imported by "/home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/sharp@0.32.6/node_modules/sharp/lib/constructor.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "stream" has been externalized for browser compatibility, imported by "/home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/sharp@0.32.6/node_modules/sharp/lib/constructor.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "/home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/sharp@0.32.6/node_modules/sharp/lib/utility.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/sharp@0.32.6/node_modules/sharp/lib/utility.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "events" has been externalized for browser compatibility, imported by "/home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/sharp@0.32.6/node_modules/sharp/lib/utility.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/sharp@0.32.6/node_modules/sharp/lib/output.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "/home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/sharp@0.32.6/node_modules/sharp/lib/libvips.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "os" has been externalized for browser compatibility, imported by "/home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/sharp@0.32.6/node_modules/sharp/lib/libvips.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/sharp@0.32.6/node_modules/sharp/lib/libvips.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "child_process" has been externalized for browser compatibility, imported by "/home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/sharp@0.32.6/node_modules/sharp/lib/libvips.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "child_process" has been externalized for browser compatibility, imported by "/home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/detect-libc@2.0.2/node_modules/detect-libc/lib/detect-libc.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "/home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/detect-libc@2.0.2/node_modules/detect-libc/lib/filesystem.js". See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
✓ 422 modules transformed.

They seem to be related to deps that are used in Astro only. I don't know what is going on but these some seem to be related to sharp used by astro.

imported by "/home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/sharp@0.32.6/node_modules/sharp/lib/libvips.js".

What's the expected result?

I expected to build well.

Link to Minimal Reproducible Example

https://github.com/louiss0/personal-projects.git

Participation

• [ ] I am willing to submit a pull request for this issue.

  ### Tasks

[github-actions[bot]]

Hello @louiss0. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[louiss0]

I could not use a minimal production showing you this code was the best I could do.

I decided to use the dev branch to show off the error go there.

1. clone the repo
2. Switch to the dev branch
3. install dependencies
4. Run nx run blog:build

[louiss0]

@natemoo-re I tried to do that but the problem is that I don't get any of the errors. It has something to do with my code specifically. Even If I recreate a similar project setup I probably won't be able to reproduce the error.

I will show you the mono-repo example. Oh Stackblitz does not allow me to create and nx mono-repo at all.

[natemoo-re]

The included link to your repository doesn't work. https://github.com/louiss0/personal-projects is a 404.

Full repositories are also not considered a minimal reproduction. The process of creating a minimal reproduction is not only what allows us to quickly address issues as maintainers, it often helps users to uncover issues with their own code. See antfu's great article on this topic.

Just a wild guess based on your logs, but it seems like astro:assets is being referenced in a file that is being sent to the browser.

[louiss0]

The included link to your repository doesn't work. https://github.com/louiss0/personal-projects is a 404.

Full repositories are also not considered a minimal reproduction. The process of creating a minimal reproduction is not only what allows us to quickly address issues as maintainers, it often helps users to uncover issues with their own code. See antfu's great article on this topic.

Just a wild guess based on your logs, but it seems like astro:assets is being referenced in a file that is being sent to the browser.

That's true but I don't use it in a client component at all.

[natemoo-re]

louiss0/personal-projects is returning a 404. Is your repository private?

[louiss0]

louiss0/personal-projects is returning a 404. Is your repository private?

@natemoo-re I made it public. Please use this code in the meantime I will try to create a different mono-repo.

[louiss0]

The included link to your repository doesn't work. https://github.com/louiss0/personal-projects is a 404.

Full repositories are also not considered a minimal reproduction. The process of creating a minimal reproduction is not only what allows us to quickly address issues as maintainers, it often helps users to uncover issues with their own code. See antfu's great article on this topic.

Just a wild guess based on your logs, but it seems like astro:assets is being referenced in a file that is being sent to the browser.

Does using view transitions have anything to do with the bundling?

[louiss0]

@natemoo-re I tried to replicate the issue but I can't I decided to remove the version of vite that was in my repo but that didn't change anything. Can you tell me how Vite decides what goes to the browser vs what goes to the client?

[lilnasy]

Anything that gets imported by a framework component with a client directive, and further everything that module imports, will go to the client.

[louiss0]

@natemoo-re I tried to create a minimal repro for stackblitz but Nx doesn't work with it. I have decided to create a smaller and less confusing mono-repo for you. I had to create a mono-repo
It's not possible to reproduce the error without one I tried VITE WILL STILL BUNDLE THE DEPS WELL

I found out that the bundling problems have something to do with markdoc. It does not like it when I put the markdoc config file outside of the place where the integration was installed. @bholmesdev Please look into this.

For proof nx doesn't work with stackblitz https://stackblitz.com/~/github.com/louiss0/dummy-astro-repo

The new minimal reproduction https://github.com/louiss0/dummy-astro-repo.

All you have to do is use the command.

pnpm nx run blog:build

The build will not break but you will see plenty of node stuff going to the browser for some reason.

[lilnasy]

@louiss0 I tried to take a look but the repo is still far too noisy. For example, are assets, components, images, utils, collections.ts, constants.ts, utils.ts involved?

On a different note, please don't invite specific to help you. The core team is also focusing on 4.0 this week.

[louiss0]

@louiss0 I tried to take a look but the repo is still far too noisy. For example, are assets, components, images, utils, collections.ts, constants.ts, utils.ts involved?

On a different note, please don't invite specific to help you. The core team is also focusing on 4.0 this week.

Fine, I will format things, but can someone please run the nx run blog:build command, that is what this is about.

[lilnasy]

I did see the same warnings you mentioned when I ran it.

[louiss0]

collections.ts, constants.ts, utils.ts

I got rid of collections.ts, constants.ts, utils.ts. The rest of the files still need to be there for the app to work. The files are close to what a normal NX repo would look like.

[louiss0]

Update I found out that @astrojs/markdoc is responsible for all of this. It uses astro:assets to import the image module. @lilnasy Please tell them.

[lilnasy]

That seems about right, markdoc is not intended to be usable in the browser.

[bholmesdev]

I'll unfortunately echo @lilnasy's comment here. I understand Markdoc is a fast choice for client-side rendering! But server-rendering is the only option in-scope with Markdoc today. I'd suggest using the core @markdoc/markdoc libraries for this use case. I'll close as out-of-scope for now.

[louiss0]

I'll unfortunately echo @lilnasy's comment here. I understand Markdoc is a fast choice for client-side rendering! But server-rendering is the only option in-scope with Markdoc today. I'd suggest using the core @markdoc/markdoc libraries for this use case. I'll close as out-of-scope for now.

I don't know how this happened I never tried to use Markdoc in the client. @bholmesdev I updated to the latest version and stumbled upon this problem. It starts when I create a markdoc.config.mjs file.

[bholmesdev]

@louiss0 yeah, I don't see any code that ships to the client. I pulled down your repo and ran astro build within apps/blog without issue, but only when I added a package.json to the app with app project dependencies. My guess is nx is somehow targetting browser compat when running the build, or it's not resolving apps/astro/src as your project's source directory when running from the workspace root.

I see that your apps/blog package does not have a package.json. This is recommended if you are creating a monorepo with multiple packages and applications. I'd suggest creating one with all project dependencies, and adding a build script that you can run from your project root. i.e. direct nx to run the build: "astro build" command specified in apps/blog/package.json.

[louiss0]

@louiss0 yeah, I don't see any code that ships to the client. I pulled down your repo and ran astro build within apps/blog without issue, but only when I added a package.json to the app with app project dependencies. My guess is nx is somehow targetting browser compat when running the build, or it's not resolving apps/astro/src as your project's source directory when running from the workspace root.

I see that your apps/blog package does not have a package.json. This is recommended if you are creating a monorepo with multiple packages and applications. I'd suggest creating one with all project dependencies, and adding a build script that you can run from your project root. i.e. direct nx to run the build: "astro build" command specified in apps/blog/package.json.

@bholmesdev I added @astrojs/vue and added some vue reated code along with it. It blew up again. Am I supposed to add markdoc last or something. I don't know what's going on.

Do you remember what you changed about @astrojs/markdoc from 6.0 - 7.0. The errors only happen when I use > 6.0.

[nathandaly]

astro:assets

@natemoo-re Thanks. That was my issue :)

[blueambr]

I have absolutely the same issue with @astrojs/mdx and with @astrojs/mdoc. I tried both. This is something to be resolved by Astro. The format is too important for Markdown based CMSs and I'm very surprised to learn about this issue at all. Monorepos or whatever have nothing to do with this.

Would be nice to see some clarifications as to what to do in this situation, instead of just Closing a quite important Issue.

Thank you.