Gus
Add a Nuxt module on top of an existing vue plugin library (without the official module-builder)
Hi everyone!
I have a TypeScript library which has its core implemented as a framework agnostic components (it's actually a repository pattern to connect with my APIs). Inside of this same library I built a Vue Plugin to be able to use this library out of the box inside of any of my Vue SPA applications (I use Vite as bundler btw).
So I can use
import { anyRepo } from "my-lib" or import { installVuePlugin, useMyLib } from "my-lib/vue" - I could do this by adding Vue as peer deps and externalizing it as I build the library with Vite and I have 2 outputs being the root generic one and the Vue-ish one.
Know, as nuxt as a few other constraints that I have to handle like I need to keep the requests within the request context in SSR and manage cookies properly there, I wanted to create a module similarly to what I did with Vue to use like // nuxtconfig -> modules: ['my-lib/nuxt'].
My problem is that I could not manage to build the library as soon as I add nuxt! I used @nuxt/kit, installed nuxt and @nuxt/schema as dev-deps but it fails while building as inside of my module I need to use things like useRequestFetch and useCookie among others that I need to import from nuxt/app - which leads to an error like nuxt.config.mjs missing... error.
Do you guys know any repo that I could get inspired to make this work? Or would anyone be able to guide me trhough that? I considered on creating a new library using the module builder with the my-lib being used under the hood but this is not a good option for me at the moment!
I really appreciate if anyone could shed some light.
The error I was getting while trying to build the application:
11 replies
How to handle 404 from the `_nuxt` folder?
Hey everyone,
I've encountered an interesting issue and haven't found a good solution yet. According to the official Nuxt docs, when a chunk load event is triggered by a recent deployment, Nuxt handles it by performing a hard refresh, which usually resolves everything.
However, in my case, for reasons I haven't been able to determine (I'd appreciate hearing any similar experiences), many assets are being requested as if trying to load an old version of the document. All these requests end up bootstrapping the entire Nuxt application and result in the website returning a 404 page.
Here's the problem: When accessing the root of the website, it tries to load 20+ assets that might not exist anymore. Each of these requests bootstraps Nuxt, runs all the global and page middlewares, and sends a lot of events to Sentry.
For example, here's a valid asset from the Nuxt website:
https://nuxt.com/_nuxt/Q5ocEdzv.js
You get the expected output.
But if you try to access an asset that no longer exists:
https://nuxt.com/_nuxt/Q5ocEdzv-INVALID-ASSET.js
You see that the website loads, and in my case, it runs a few middlewares that rely on route parameters, resulting in many events being sent to Sentry.
To summarize, I'm looking for help with the following:
- Has anyone faced similar issues?
- Are there any possible solutions or fixes I might not be aware of?
- Is there a way to gracefully skip middlewares when these asset requests occur?
- Why would these assets still be called frequently?
- Any insights or suggestions would be greatly appreciated. Thanks!
3 replies