dmarr Posts - Answer Overflow

Topics

dmarr

•Created by dmarr on 10/24/2024 in #❓・help

Debugging server locally with https

I am trying to debug some oauth stuff with my local dev server. The auth service I'm using requires the callback uri to be https, which is annoying. However, I have my dev server running over https using some self-signed certs. The trouble I'm running into is getting the debugger to attach to my local server. I would like to step through some of the server code, but from what I can tell something is amiss from my usual method to do this. I have tried several ways using vscode to no avail. I think the gotcha is that I have to start my server with sudo, since it requires port 443. Any help would be appreciated.

6 replies

•Created by dmarr on 9/25/2024 in #❓・help

How to test the side effect of a watcher function?

I have a component that looks something like this:

<script setup>
const foo = ref('foo');
function e() {
  $fetch('/xyz').then((data) => {
    foo.value.textContent = data;
  });
}
watch(foo, (node) => {
  node.textContent = 'oui';
  e();
});
</script>

<template>
  <div ref="foo" />
</template>

<script setup>
const foo = ref('foo');
function e() {
  $fetch('/xyz').then((data) => {
    foo.value.textContent = data;
  });
}
watch(foo, (node) => {
  node.textContent = 'oui';
  e();
});
</script>

<template>
  <div ref="foo" />
</template>

In my test, I'd like to assert that the change that happens in the e() function is done. So far, I see the change that happens in the watch happen, and the side effect from running e(). However when I try to assert the textContent has changed due to the call, ~~I am stuck.~~ edit: used flushPromises to pass assertion

import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime';
import { flushPromises } from '@vue/test-utils';
import Comp from './Comp.vue';

registerEndpoint('/xyz', () => 'aasd');

describe('Comp', () => {
  it('works with watchers', async () => {
    await flushPromises();
    const c = await mountSuspended(Comp);

// this now passes    
expect(c.text()).toMatchInlineSnapshot(`"aasd"`);
  });
});

import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime';
import { flushPromises } from '@vue/test-utils';
import Comp from './Comp.vue';

registerEndpoint('/xyz', () => 'aasd');

describe('Comp', () => {
  it('works with watchers', async () => {
    await flushPromises();
    const c = await mountSuspended(Comp);

// this now passes    
expect(c.text()).toMatchInlineSnapshot(`"aasd"`);
  });
});

6 replies

•Created by dmarr on 9/24/2024 in #❓・help

How would I mock a route with nuxt test-utils if I am not mounting a component?

I am trying to test a pinia store, and it relies on the useRoute composable. I am not mounting a component, and was getting undefined from the useRoute call that is made in the store I'm trying to test. Is there a workaround for that?

1 replies

•Created by dmarr on 9/19/2024 in #❓・help

nuxi typecheck returns errors from files in node_modules

A couple oddities with nuxi typecheck -- I find it reporting on errors that appear in my node_modules directory. Granted, its for a package that I am extending (extends in config). But still, shouldn't it stay confined to the current application? I have tried setting the root to src in the typecheck npm script but it still reports on those errors. The other thing is, those errors don't show up in my ide. I have the layer package added to the vscode ide and it doesn't report on any of the errors that nuxi typecheck does (that are contained in the node_modules dir). Have people worked around this somehow? I imagine I could execute vue-tsc manually

6 replies

•Created by dmarr on 9/5/2024 in #❓・help

Is there a way to invalidate cache with wildcards?

I would like to have a route that does something like:

await useStorage('cache').removeItem(`nitro:functions:getData:*:*.json`);

await useStorage('cache').removeItem(`nitro:functions:getData:*:*.json`);

Is there any way I can use wildcards? Since my cache keys are dynamic, I'm not sure how I'd invalidate them. Thanks!

3 replies

•Created by dmarr on 8/15/2024 in #❓・help

Is it possible to support top level await in route handlers?

I have a route handler (/server/routes/foo.ts) and was hoping to have a top level await outside the event handler. Is that possible? The compiler says that it's not supported since we're targeting ES2019. I also see the caveat in the docs about setting the target in the tsconfig.json file. So maybe I'm asking something that isn't doable...

1 replies

•Created by dmarr on 6/14/2024 in #❓・help

Resolve a path relative to layer?

I'm trying to troubleshoot the pinia module when used from a layer, and I think it's not resolving the 'stores' directory relative to the layer. How would I resolve "stores" for example that the layer defines? I can do this in the layer: const resolvedPath = await resolvePath("pinia/dist/pinia.mjs"); and the proper path is returned. it is basically <apps_dir>/node_modules/<layer_dir>/node_modules/pinia/dist/pinia.mjs I'm getting hung up how I'd find the dir: <apps_dir>/node_modules/<layer_dir>/stores I've tried several things.. if I create a resolver like: createResolver(imports.meta.url) within the layer/module, it gets resolved to the app dir using the layer. This may be due to the way I'm trying to develop but I don't know. I'm trying with published npm packages.

25 replies

•Created by dmarr on 6/13/2024 in #❓・help

Layers and non-ESM dependencies

I am running into some issues with dependencies in my nuxt layer. Basically, in my parent project, I get some client errors like "mapbox-gl does not provide an export named 'default'". I don't see this issue when I'm running the layer in it's own playground. This appears to happen when using the built version of the layer in an external app. Does anyone know a good way to find these issues and how I'd troubleshoot them?

3 replies

•Created by dmarr on 6/30/2023 in #❓・help

Using DataDog (dd-trace)

Has anyone had success using the dd-trace package with nuxt 3? I am trying to do some tracing, but I don't see anything happening when I build and then start the server. I have tried several methods to initialize the dd-trace package. Specifically, I would expect this to show the configuration:

DD_TRACE_STARTUP_LOGS=true node --require dd-trace/init node_modules/.bin/nuxi start

DD_TRACE_STARTUP_LOGS=true node --require dd-trace/init node_modules/.bin/nuxi start

This does show the trace I expect though:

DD_TRACE_STARTUP_LOGS=true node --require dd-trace/init .output/server/index.mjs

DD_TRACE_STARTUP_LOGS=true node --require dd-trace/init .output/server/index.mjs

I guess since the dd-trace module has to be the first thing run, the nuxi binary somehow prevents that.

1 replies

•Created by dmarr on 6/5/2023 in #❓・help

Providing computed values from plugin

I am trying to provide a computed value from a plugin, and I'm not sure why it's not working. I have two plugins here: https://stackblitz.com/edit/github-vcbsj4-pqa2gg?file=plugins%2F0.init.ts,app.config.ts,app.vue,plugins%2F1.other.ts The 0.init is commented out, but works as expected when uncommented. It uses app config which is reactive. The 1.other is the plugin I'm working on returns a computed. In the app, I don't see the value change. Hoping this is something obvious.

22 replies

•Created by dmarr on 6/2/2023 in #❓・help

Managing Server State

I have some sensitive data I need to load before presenting a login page. In the vue page, I use useNuxtData to use data that was provided in a plugin. I wasn't sure how to keep the page "server only" if possible, since the provide only happens if process.server.

7 replies

•Created by dmarr on 5/26/2023 in #❓・help

useLazyFetch initial load not pending

I have a question about showing a loading state. In a simple example, I am trying to use the pending state from useLazyFetch on initial page load. Pending only appears to get set when I use the refresh method. Why does useLazyFetch appear to block on initial server page load? I have tried using await and not await, they don't seem to matter.

6 replies

•Created by dmarr on 5/24/2023 in #❓・help

Lazy AppConfig?

Is there a way to have some kind of lazy app config? I would like to use defineAppConfig, but after the request comes in. Since my app uses subdomains, I would want different app configs based on the host requested.

7 replies

•Created by dmarr on 5/23/2023 in #❓・help

How to cache server calls using useNuxtData?

I am wondering how I'd cache large server route data calls in my app. I have an initial question about useNuxtData though, in this example: https://stackblitz.com/edit/github-vcbsj4-pqa2gg?file=nuxt.config.ts,app.vue the page will load with data rendered only if I use ssr: true. With ssr: false, the page requires the fetch button to be pressed before loading the data. Once I figure that out, I will want to know how I'd cache large requests made in server routes.

1 replies

•Created by dmarr on 4/21/2023 in #❓・help

Linked ESM package not found

I am trying to import from a linked package that I've built with vite (in library mode). When I try to run the dev script, I get:

Failed to load url /@fs/Users/david.marr/code/ui-components/packages/Utils/lib/index.mjs (resolved id: /Users/david.marr/code/ui-components/packages/Utils/lib/index.mjs) in /Users/david.marr/code/app/src/plugins/filters.js. Does the file exist?

I don't have type: 'module' in either the app or the package i'm trying to import. I've linked the package and verified that it is in node_modules. Not sure what the issue is... If I run the build script, the issue doesn't appear. I also am able to import this package in a fresh nuxt 3 app, so maybe there is something with linking that is the issue?

32 replies

•Created by dmarr on 4/21/2023 in #❓・help

How does @server/utils work?

When I try to add a file server/utils/index.ts, I don't seem to be able to import with import { x } from @server/utils I get an error: Cannot find module '@server/utils'

8 replies

•Created by dmarr on 2/9/2023 in #❓・help

Making POST or PATCH requests with $fetch?

I would like to send a request to an external API using $fetch. I am getting some errors when doing something like so:

body = await readBody(event);
headers = { authorization: 'foo' }
$fetch('https://foo.com/api', { body, headers, method: 'POST' })

body = await readBody(event);
headers = { authorization: 'foo' }
$fetch('https://foo.com/api', { body, headers, method: 'POST' })

The response from the server is "invalid JSON". I am inspecting the request before it goes out and it looks like a valid object.

10 replies