how to use imports in nuxt.config.ts via paths ?

[m0dch3n]

Environment

Nuxi 3.0.0-rc.10 14:35:32
RootDir: /home/workspace/app/packages/app/web 14:35:33
Nuxt project info: 14:35:33

---

• Operating System: Linux
• Node Version: v18.9.1
• Nuxt Version: 3.0.0-rc.10
• Nitro Version: 0.5.3
• Package Manager: npm@8.19.1
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

import { createBackendConfig } from '@mypath/common-api/config/backendConfig' in your nuxt.config.ts

Describe the bug

Will result in:

ERROR Cannot start nuxt: Cannot find module '@mypath/common-api/config/backendConfig'

Which is obvious because, it doesn't know @mypath in the context of nuxt.config.ts

In Vite I can define this for vite.config.ts in tsconfig.node.json because this tsconfig is responsible for the vite.config.ts due to "include": ["vite.config.ts", "./vite.ts"],

How do I do in nuxt environment for nuxt.config.ts ?

Additional context

No response

Logs

No response

[danielroe]

you can register @mypath/common-api as a package in your package.json, either using the file: or link: protocols.

[robmontesinos]

Trying to generate dynamic routes in a static site and I keep getting the error: 'useFetch is not defined.' When I try to import { useFetch } from '#imports' or from '#app', I get the 'Cannot find module '#app' or '#imports'.

import { useFetch } from '#app';

import { GlobalSettings } from './environmentSettings';
import { ITeam } from '@/types/ITeam';

const appEnv = process.env.ENV || 'development';

const getTeamRoutes = async () => {
  const url = '/api/teams';

  const { data: teamsData } = await useFetch<ITeam[]>(url, {
    method: 'GET',
  });

  const teams: ITeam[] = teamsData.value;

  const teamSlugs = teams.map((teeam) => {
    return `/teams/team-${team.slug}/`;
  });

  return teamSlugs;
};

export default defineNuxtConfig({
  target: 'static',
  // ssr: false,
  // generate: {
  //   crawler: true,
  // },
  // nitro: {
  //   serveStatic: true,
  //   prerender: {
  //     crawlLinks: true,
  //     routes: ['/'],
  //   },
  // preset: 'browser',
  // },

  hooks: {
    'nitro:config': async function (nitroConfig) {
      if (nitroConfig.dev) {
        return;
      }
      const slugs = await getTeamRoutes();
      nitroConfig.prerender.routes.push(...slugs);
    },
  },
}

I'd appreciate any suggestions as to how to import a Nuxt composable into nuxt.config.ts

[danielroe]

Nuxt composables should not be used in your Nuxt config; they are only meant to be used in a Vue context.

You can import $fetch from ohmyfetch though.

[robmontesinos]

Thank you so much @danielroe - you are correct. Unfortunately I received the following error trying to generate dynamic routes for a static site with the above method in the config file - pulling my hair out:

 ERROR  Invalid URL ()                                                                                                  16:27:48

  at async $fetchRaw2 (node_modules/ohmyfetch/dist/shared/ohmyfetch.fb8dc89e.mjs:132:20)
  at async getElectionRoutes (nuxt.config.ts:12:35)
  at async nitro:config (nuxt.config.ts:45:21)
  at async initNitro (node_modules/nuxt/dist/index.mjs:1475:3)
  at async initNuxt (node_modules/nuxt/dist/index.mjs:1692:3)
  at async loadNuxt (node_modules/nuxt/dist/index.mjs:1718:5)
  at async loadNuxt (node_modules/@nuxt/kit/dist/index.mjs:737:19)
  at async Object.invoke (node_modules/nuxi/dist/chunks/build.mjs:34:18)
  at async Object.invoke (node_modules/nuxi/dist/chunks/generate.mjs:32:5)
  at async _main (node_modules/nuxi/dist/cli.mjs:50:20)

[danielroe]

You need to fetch from a full URL. Fetching from /api/test only works within Nuxt; elsewhere, you need to use a URL like https://path.to/my/backend/api/test.

[robmontesinos]

@danielroe Duh!! You da man Dan - thanks so much