dmarr
dmarr
PostsComments
NNuxt
Created by dmarr on 2/13/2025 in #❓・help
Build error after upgrading to 3.15.4 - No "exports" main defined ... unicorn-magic 🦄
Full error after npm run build: 
[nuxi 8:26:08 AM]  ERROR  Nuxt Build Error: [vite:css] [postcss] No "exports" main defined in /Users/david.marr/code/xyz/node_modules/globby/node_modules/unicorn-magic/package.json
file: /Users/david.marr/code/xyz/src/assets/css/tailwind.css:undefined:NaN
[nuxi 8:26:08 AM]  ERROR  Nuxt Build Error: [vite:css] [postcss] No "exports" main defined in /Users/david.marr/code/xyz/node_modules/globby/node_modules/unicorn-magic/package.json
file: /Users/david.marr/code/xyz/src/assets/css/tailwind.css:undefined:NaN
Is there some way to fix this that anyone can help with?
14 replies
NNuxt
Created by dmarr on 2/7/2025 in #❓・help
Breaking app when awaiting composable in page setup
I have a pretty barebones use case that seems like it shouldn't be breaking things. On my page setup, I do the following: 
<script setup lang="ts">
await useTest2();
</script>
<script setup lang="ts">
await useTest2();
</script>
In my composables: 
export const useTest = () => useState<any>('test', () => null);
export const useTest2 = async () => {
  await useFetch('https://api.github.com/users/octocat').then((data) => {
    useTest().value = data.data;
  });
}
export const useTest = () => useState<any>('test', () => null);
export const useTest2 = async () => {
  await useFetch('https://api.github.com/users/octocat').then((data) => {
    useTest().value = data.data;
  });
}
This causes the dreaded A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. error. I tried some of the workarounds, but was not successful. What am I missing here?
14 replies
NNuxt
Created by dmarr on 1/30/2025 in #❓・help
Trouble with pinia - `defineStore is not defined` when a layer containing a pinia store is called
I have been fighting this issue for awhile now, but when I have a layer in my app that is packaged separately (non-monorepo) and it uses pinia, I get errors in my app: defineStore is not defined -- I have tried so many things to work around this, and even have a PR that I think fixes the issue on pinia: https://github.com/vuejs/pinia/pull/2699 Maybe this is a shot in the dark, but if anyone can help me understand where/why that is failing it would be a big help. If I look in the imports.d.ts file in my app's .nuxt dir, I can see that defineStore is exported: 
export { defineStore, acceptHMRUpdate, usePinia, storeToRefs } from '../node_modules/@pinia/nuxt/dist/runtime/composables';
export { defineStore, acceptHMRUpdate, usePinia, storeToRefs } from '../node_modules/@pinia/nuxt/dist/runtime/composables';
I am not sure how to troubleshoot this further.
8 replies
NNuxt
Created by dmarr on 11/29/2024 in #❓・help
Sharing types across a custom devtool module and client
I am playing around with the devtools kit and wondering how I would create types that are part of the module but also shared to the client (app packaged within the devtools module). In the documentation regarding the custom rpc functions: https://devtools.nuxt.com/module/guide#custom-rpc-functions it gives an example of the types with rpc-types.ts as a filename. Later, they show these types being accessed from the sub app (client) directory. How would that work? Is there a way to bundle those types so they are auto-imported into the client app?
9 replies
NNuxt
Created by dmarr on 11/20/2024 in #❓・help
How do I add a custom log reporter to nuxt?
I have tried using a module to call the addReporter function on the logger instance like so: 
import { useLogger } from "nuxt/kit";
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [() => {
    const logger = useLogger();
    logger.addReporter({
      log(logObj) {
        console.log(JSON.stringify(logObj));
      }
    })
  }]
})
import { useLogger } from "nuxt/kit";
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [() => {
    const logger = useLogger();
    logger.addReporter({
      log(logObj) {
        console.log(JSON.stringify(logObj));
      }
    })
  }]
})
But when running a build, I see a maximum call stack error
19 replies
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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