openapi-ts icon indicating copy to clipboard operation
openapi-ts copied to clipboard

Error building Nuxt client: `Package import specifier "#build/nuxt.config.mjs" is not defined in package`

Open rigtigeEmil opened this issue 10 months ago • 36 comments

Description

Running nuxt dev after changing from @hey-api/client-fetch to @hey-api/client-nuxt (and re-building the client) throws the following:

ERROR  [nuxt] [request error] [unhandled] [500] 
Package import specifier "#build/nuxt.config.mjs" is not defined in package
(..)\node_modules\.pnpm\[email protected]_@[email protected]_@[email protected]_@[email protected]_better-sqlite3@11_2ct7njmhu3gpvfg3wk7372se64\node_modules\nuxt\package.json 
imported from 
(..)\node_modules\.pnpm\[email protected]_@[email protected]_@[email protected]_@[email protected]_better-sqlite3@11_2ct7njmhu3gpvfg3wk7372se64\node_modules\nuxt\dist\app\nuxt.js

I tried replicating it with a small sample, but I wasn't able to. Mostly wondering if there's any clues to why this might be happening, or if I'm doing something wrong.

Perhaps the most likely cuplrit is that I'm running with combatibilityversion 4 (in nuxt.config.ts)(:

future: {
	compatibilityVersion: 4,
},
compatibilityDate: '2024-04-03',

openapi-ts.config.ts:

export default defineConfig({
	input: 'https://localhost:7015/openapi/v1.json',
	output: {
		lint: 'eslint',
		path: 'app/gilbert-api',
	},
	plugins: [
		'@hey-api/client-fetch',
		// '@hey-api/client-nuxt',
	],
});

Reproducible example or configuration

No response

OpenAPI specification (optional)

No response

System information (optional)

package.json:

  "dependencies": {
    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@43945f6",
    "@nuxtjs/i18n": "^9.1.4",
    "@pinia/nuxt": "^0.9.0",
    "@tailwindcss/vite": "4.0.3",
    "nuxt": "^3.15.4",
    "pinia": "^2.3.1",
    "tailwindcss": "4.0.3",
    "vue": "^3.5.13",
    "vue-i18n": "^11.1.0",
    "vue-router": "4.5.0",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@hey-api/client-fetch": "^0.7.3",
    "@hey-api/client-nuxt": "^0.1.3",
    "@hey-api/openapi-ts": "^0.63.2",
    "@iconify-json/lucide": "^1.2.25",
    "@nuxt/eslint": "^1.0.0",
    "@nuxt/test-utils": "^3.15.4",
    "@vue/test-utils": "^2.4.6",
    "cross-env": "^7.0.3",
    "eslint": "^9.19.0",
    "happy-dom": "^16.8.1",
    "playwright-core": "^1.50.1",
    "ts-to-zod": "^3.15.0",
    "typescript": "^5.7.3",
    "vitest": "^3.0.4"
  },

rigtigeEmil avatar Feb 01 '25 19:02 rigtigeEmil

@rigtigeEmil so you used compatibilityVersion in your sample project and it didn't reproduce?

mrlubos avatar Feb 01 '25 20:02 mrlubos

@mrlubos yeah, it's here: https://stackblitz.com/edit/nuxt-starter-t9st2hbw?file=nuxt.config.ts,app.vue

rigtigeEmil avatar Feb 01 '25 20:02 rigtigeEmil

@rigtigeEmil I don't see you calling the client as you would in a real application. I fear there are too many variables as to what might be wrong. I tried building with 3.15.4 and compatibilityVersion set to 4 but it succeeded.

(base) ➜  openapi-ts git:(main) ✗ pnpm example nuxt build     

> [email protected] example /Users/mrlubos/git/@hey-api/openapi-ts
> sh ./scripts/example.sh "nuxt" "build"


> @example/[email protected] build /Users/mrlubos/git/@hey-api/openapi-ts/examples/openapi-ts-nuxt
> nuxt build

[nuxi 8:23:50 PM] Nuxt 3.15.4 with Nitro 2.10.4
[nuxt 8:23:52 PM] ℹ Running with compatibility version 4
[nuxi 8:23:52 PM] ℹ Building for Nitro preset: node-server
[8:23:53 PM] ℹ Building client...
[8:23:53 PM] ℹ vite v6.0.11 building for production...
[8:23:55 PM] ℹ ✓ 174 modules transformed.
[8:23:55 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/client/manifest.json                   2.82 kB │ gzip:  0.45 kB
[8:23:55 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/client/_nuxt/error-500.D2JmALe7.css    1.88 kB │ gzip:  0.72 kB
[8:23:55 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/client/_nuxt/error-404.B5R4p8kg.css    3.56 kB │ gzip:  1.10 kB
[8:23:55 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/client/_nuxt/d9Bg_rY9.js               0.47 kB │ gzip:  0.31 kB
[8:23:55 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/client/_nuxt/aLLkGDyu.js               3.42 kB │ gzip:  1.54 kB
[8:23:55 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/client/_nuxt/BFuuRhsk.js               9.44 kB │ gzip:  3.77 kB
[8:23:55 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/client/_nuxt/C66uyTli.js             209.35 kB │ gzip: 70.82 kB
[8:23:55 PM] ℹ ✓ built in 1.54s
[8:23:55 PM] ✔ Client built in 1563ms
[8:23:55 PM] ℹ Building server...
[8:23:55 PM] ℹ vite v6.0.11 building SSR bundle for production...
[8:23:56 PM] ℹ ✓ 119 modules transformed.
[8:23:56 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/server/_nuxt/error-500-styles.CZT2I9XH.mjs            0.08 kB
[8:23:56 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/server/_nuxt/error-404-styles.wKLi4dRK.mjs            0.08 kB
[8:23:56 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/server/_nuxt/error-404-styles.BtSxAwS2.mjs            0.15 kB
[8:23:56 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/server/_nuxt/error-500-styles.D8xyG6Hu.mjs            0.15 kB
[8:23:56 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/server/styles.mjs                                     1.28 kB
[8:23:56 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/server/_nuxt/_plugin-vue_export-helper-B8P8R7cg.js    1.01 kB │ map:   1.86 kB
[8:23:56 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/server/_nuxt/error-500-styles-1.mjs-CbhsYk0K.js       2.10 kB │ map:   0.12 kB
[8:23:56 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/server/_nuxt/error-404-styles-1.mjs-DAW0LlpM.js       3.77 kB │ map:   0.12 kB
[8:23:56 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/server/_nuxt/error-500-DePv2HKh.js                    4.88 kB │ map:   5.52 kB
[8:23:56 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/server/_nuxt/multipart-parser-K5Bv0CUV.js             6.92 kB │ map:  10.90 kB
[8:23:56 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/server/_nuxt/error-404-BSjrmwzt.js                   14.51 kB │ map:  26.80 kB
[8:23:56 PM] ℹ node_modules/.cache/nuxt/.nuxt/dist/server/server.mjs                                   254.56 kB │ map: 488.37 kB
[8:23:56 PM] ℹ ✓ built in 886ms
[8:23:56 PM] ✔ Server built in 891ms
[nitro 8:23:56 PM] ✔ Generated public .output/public
[nitro 8:23:56 PM] ℹ Building Nuxt Nitro server (preset: node-server, compatibility date: 2024-11-01)
[nitro 8:23:58 PM] ✔ Nuxt Nitro server built
  ├─ .output/server/chunks/_/error-500.mjs (4.77 kB) (2.02 kB gzip)
  ├─ .output/server/chunks/_/error-500.mjs.map (336 B) (257 B gzip)
  ├─ .output/server/chunks/build/_plugin-vue_export-helper-B8P8R7cg.mjs (1.01 kB) (481 B gzip)
  ├─ .output/server/chunks/build/_plugin-vue_export-helper-B8P8R7cg.mjs.map (291 B) (226 B gzip)
  ├─ .output/server/chunks/build/client.manifest.mjs (3.48 kB) (564 B gzip)
  ├─ .output/server/chunks/build/client.manifest.mjs.map (204 B) (158 B gzip)
  ├─ .output/server/chunks/build/error-404-BSjrmwzt.mjs (14.7 kB) (4.54 kB gzip)
  ├─ .output/server/chunks/build/error-404-BSjrmwzt.mjs.map (567 B) (288 B gzip)
  ├─ .output/server/chunks/build/error-404-styles-1.mjs-DAW0LlpM.mjs (3.77 kB) (1.21 kB gzip)
  ├─ .output/server/chunks/build/error-404-styles-1.mjs-DAW0LlpM.mjs.map (122 B) (123 B gzip)
  ├─ .output/server/chunks/build/error-404-styles.BtSxAwS2.mjs (373 B) (207 B gzip)
  ├─ .output/server/chunks/build/error-404-styles.BtSxAwS2.mjs.map (249 B) (183 B gzip)
  ├─ .output/server/chunks/build/error-404-styles.wKLi4dRK.mjs (315 B) (205 B gzip)
  ├─ .output/server/chunks/build/error-404-styles.wKLi4dRK.mjs.map (239 B) (177 B gzip)
  ├─ .output/server/chunks/build/error-500-DePv2HKh.mjs (4.96 kB) (2.08 kB gzip)
  ├─ .output/server/chunks/build/error-500-DePv2HKh.mjs.map (342 B) (267 B gzip)
  ├─ .output/server/chunks/build/error-500-styles-1.mjs-CbhsYk0K.mjs (2.09 kB) (835 B gzip)
  ├─ .output/server/chunks/build/error-500-styles-1.mjs-CbhsYk0K.mjs.map (122 B) (123 B gzip)
  ├─ .output/server/chunks/build/error-500-styles.CZT2I9XH.mjs (315 B) (206 B gzip)
  ├─ .output/server/chunks/build/error-500-styles.CZT2I9XH.mjs.map (239 B) (181 B gzip)
  ├─ .output/server/chunks/build/error-500-styles.D8xyG6Hu.mjs (373 B) (208 B gzip)
  ├─ .output/server/chunks/build/error-500-styles.D8xyG6Hu.mjs.map (249 B) (184 B gzip)
  ├─ .output/server/chunks/build/multipart-parser-K5Bv0CUV.mjs (6.99 kB) (2.42 kB gzip)
  ├─ .output/server/chunks/build/multipart-parser-K5Bv0CUV.mjs.map (271 B) (196 B gzip)
  ├─ .output/server/chunks/build/server.mjs (255 kB) (59.6 kB gzip)
  ├─ .output/server/chunks/build/server.mjs.map (7.44 kB) (1.29 kB gzip)
  ├─ .output/server/chunks/build/styles.mjs (1.32 kB) (424 B gzip)
  ├─ .output/server/chunks/build/styles.mjs.map (186 B) (152 B gzip)
  ├─ .output/server/chunks/nitro/nitro.mjs (173 kB) (42.1 kB gzip)
  ├─ .output/server/chunks/nitro/nitro.mjs.map (5.78 kB) (1.07 kB gzip)
  ├─ .output/server/chunks/routes/renderer.mjs (13.9 kB) (4.43 kB gzip)
  ├─ .output/server/chunks/routes/renderer.mjs.map (728 B) (344 B gzip)
  ├─ .output/server/chunks/virtual/_virtual_spa-template.mjs (94 B) (100 B gzip)
  ├─ .output/server/chunks/virtual/_virtual_spa-template.mjs.map (112 B) (111 B gzip)
  ├─ .output/server/index.mjs (287 B) (188 B gzip)
  └─ .output/server/package.json (648 B) (323 B gzip)
Σ Total size: 2.09 MB (494 kB gzip)
[nitro 8:23:59 PM] ✔ You can preview this build using node .output/server/index.mjs

mrlubos avatar Feb 01 '25 20:02 mrlubos

@rigtigeEmil I will update the example to use compatibilityVersion just to be sure but this seems to be an issue somewhere else

mrlubos avatar Feb 01 '25 20:02 mrlubos

My first stop would be to have a good look at the dependency tree and see if there are any incompatible versions installed. I could be way off base though

mrlubos avatar Feb 01 '25 20:02 mrlubos

Paging @danielroe in case you know off the bat where to look!

mrlubos avatar Feb 01 '25 20:02 mrlubos

In my own application, I get the exception without using the client - it simply throws on nuxt dev. I'll go through and add dependencies slowly, and see if they're the culprit. Thanks for the help!

rigtigeEmil avatar Feb 01 '25 20:02 rigtigeEmil

@mrlubos I've managed to replicate it. It seems related to pnpm. I initially tried in stackblitz with npm, and it worked no problem. Moving to pnpm instead causes stackblitz to hang forever, and I assume it's because it's encountering the same error.

https://stackblitz.com/edit/nuxt-starter-t9st2hbw?file=app%2Fapp.vue (cancel the initial npm installation and run pnpm i && pnpm dev instead)

A small reproduction where I receive the error is available here: https://github.com/rigtigeEmil/open-api-ts

edit: Locally it makes no difference if I use npm or pnpm. Same error

rigtigeEmil avatar Feb 02 '25 12:02 rigtigeEmil

@rigtigeEmil hmm, you see in my logs I'm using pnpm in this monorepo and not running into the same issue. My guess is still it's dependency related, let me know if there's anything I can do to help however!

mrlubos avatar Feb 02 '25 19:02 mrlubos

@mrlubos I have no clue what the issue is, I'll just resort to the fetch client 🤷

If you have time, can try try cloning my repro from my previous comment, and see if you also get the same error?

rigtigeEmil avatar Feb 02 '25 19:02 rigtigeEmil

@mrlubos sorry for pinging you in advance, but I cannot for the life of me get this to work. I tried the example app in this project and I'm getting the same error.

Do you have an idea what might be causing this?

rigtigeEmil avatar Feb 05 '25 19:02 rigtigeEmil

I don't have any update since Monday, but I can have a look!

mrlubos avatar Feb 05 '25 20:02 mrlubos

@mrlubos @rigtigeEmil Hello. I had the same issue and was able to resolve it by adding the following to nuxt.config.ts:

build: {
  transpile: ['@hey-api/client-nuxt']
}

IvanKushchenko avatar Feb 15 '25 10:02 IvanKushchenko

@IvanKushchenko Do you think this is something that should be fixed in the package?

mrlubos avatar Feb 15 '25 10:02 mrlubos

@IvanKushchenko fantastic, this fixed it for me as well! Cheers

rigtigeEmil avatar Feb 15 '25 10:02 rigtigeEmil

@mrlubos Honestly, I don't know, but I think it's more likely yes than no if there are ideas on how to fix it. I was able to solve the problem only in the context of the project. Maybe the same solution will help @rigtigeEmil and others who encounter the same issue.

IvanKushchenko avatar Feb 15 '25 10:02 IvanKushchenko

@rigtigeEmil does this check out in terms of your target browsers? Maybe we'd add it as a tip so people know https://stackoverflow.com/a/72335894

mrlubos avatar Feb 15 '25 10:02 mrlubos

@mrlubos I haven't modified anything in terms of browser targets. I get the error on a completely fresh Nuxt 3 project, just with client-nuxt and openapi-ts installed 🤷

https://github.com/rigtigeEmil/open-api-ts

rigtigeEmil avatar Feb 15 '25 11:02 rigtigeEmil

I am a complete nuxt newbie, so this tip may not be helpful but maybe it actually is, so I gotta at least throw it in as an option.

According to this comment the error message is caused by importing from nuxt/app instead of #imports. I'm not sure if this applies to packages, but if it does, then maybe these imports are causing the issue?

eszterczotter avatar Feb 16 '25 00:02 eszterczotter

Running into the same issue. The workaround shown above worked for me, though I don't think it's a long-term solution. ~~Oddly enough, I commented out the workaround, and I rolled back versions to before I had the issue (0.1.x of the nuxt client and openapi-ts), however, I can no longer replicate. Even after clearing .nuxt, .output, node_modules (and pnpm cache). Maybe there is some cache or similar that is still around which is preventing a reproducable environment.~~

Can we re-open this issue?

lrstanley avatar Feb 16 '25 04:02 lrstanley

Was able to replicate with examples/openapi-ts-nuxt. All I did was replace the workspace:* version refs in package.json, and then ran pnpm run build && pnpm run preview. Some notes:

  1. Running pnpm run dev by itself doesn't produce the issue, it has to be a full build.
  2. Pulling built packages from the pnpm workspace also doesn't produce the issue. It only seems to reproduce when I have the nuxt client pulled from the registry.
  3. Was going to test using #imports, but since I can't use the pnpm workspace, it makes it hard to properly test.
    • I was looking at how some other packages do it, and I did notice #imports being used here: https://github.com/enkot/nuxt-open-fetch/blob/main/src/runtime/nuxt-plugin.ts#L1C87-L1C95

EDIT: guess https://github.com/hey-api/openapi-ts/issues/1723 already mentioned the reproducibility. Nevermind then. 😄

lrstanley avatar Feb 17 '25 07:02 lrstanley

This will be fixed soon, thank you for your patience!

mrlubos avatar Feb 27 '25 16:02 mrlubos

@mrlubos can related pr be merged, or is something holding it up?

rigtigeEmil avatar Mar 03 '25 13:03 rigtigeEmil

Yes. Something = me. I've been heads down on releasing the platform, will polish the Nuxt module hopefully this week

mrlubos avatar Mar 03 '25 14:03 mrlubos

@rigtigeEmil @eszterczotter do you want to try? https://www.npmjs.com/package/@hey-api/nuxt

Literally just released it so bear with me if it has some rough edges!

export default defineNuxtConfig({
  heyApi: {
    config: {
      input: 'path/to/openapi.json',
    },
  },
  modules: ['@hey-api/nuxt'],
});

mrlubos avatar Mar 12 '25 04:03 mrlubos

@mrlubos just starting testing it out. some things I've noticed so far (haven't tested much yet still):

  1. if indexFile is false, it will fail because it can't find the index.ts file. Setting it to true generates it, and the inverse does still delete the index file, it just throws an error and fails to startup nuxt.
[ nuxi  11:42:50 PM]  ERROR  Cannot restart nuxt:  ENOENT: no such file or directory, open '/home/liam/go/src/github.com/lrstanley/liam.sh/cmd/httpserver/public-new/app/utils/http/index.ts'

    at Object.readFileSync (node:fs:442:20)
    at setup (node_modules/.pnpm/@[email protected][email protected][email protected]_@[email protected]_@[email protected]_db0@_7bzo27ox763f2nkdo774qrkhpa/node_modules/@hey-api/nuxt/dist/module.mjs:40:12)
    at async normalizedModule (node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt/kit/dist/index.mjs:2149:17)
    at async installModule (node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt/kit/dist/index.mjs:2488:276)
    at async initNuxt (node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]_lightningcss@1._53xdjbxnrhc63nd567dsmd6nea/node_modules/nuxt/dist/shared/nuxt.B7-cu52A.mjs:5735:5)
    at async NuxtDevServer._load (node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt/cli/dist/chunks/dev2.mjs:165:5)
    at async NuxtDevServer.load (node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxt/cli/dist/chunks/dev2.mjs:95:7)
    at async _applyPromised (node_modules/.pnpm/[email protected]/node_modules/perfect-debounce/dist/index.mjs:54:10)
  1. When initially adding the module, it fails to generate the types in the nuxt.config.ts because the config hasn't been specified yet:
 ERROR  🔥 Unexpected error occurred. Log saved to /home/liam/go/src/github.com/lrstanley/liam.sh/cmd/httpserver/public-new/openapi-ts-error-1741758046212.log           11:40:46 PM
 ERROR  🔥 Unexpected error occurred. 🚫 missing input - which OpenAPI specification should we use to generate your output?                                              11:40:46 PM
 ERROR  🚫 missing input - which OpenAPI specification should we use to generate your output?

Thus making it hard to add all of the configuration, because nuxt can't bootstrap the types. I imagine the common workflow for modules that require inputs in the nuxt.config.ts file is:

add module into nuxt.config.ts -> nuxt restarts & bootstraps types -> user can now add `heyApi` block with full types

May be worth making it so if the nuxt config isn't provided, but the module is used, it throws a warning (or, maybe it throws a warning only during development, but fails during a full compilation/build?).

lrstanley avatar Mar 12 '25 05:03 lrstanley

Thanks as always @lrstanley? Do you know how to detect build/compilation vs development?

Overall, does it feel like the right step with this module over using a client?

mrlubos avatar Mar 12 '25 05:03 mrlubos

Other than the index issue (I assume this is because of the auto-imports, which I'm fine leaving index.ts if it means I get auto-imports, though it should probably be a better error), and the "getting started" phases, further testing seems good. no more of the previous errors during compilation.

Do you know how to detect build/compilation vs development?

I don't unfortunately. I imagine there is probably a way, though.

As far as if this is the right approach -- with my project, I was actually doing something almost identically already. I moved from the static config file + cli invocation, to using a nuxt hook with the library method, that way anytime I changed the config, nuxt dev server starts up, or during build, it gets invoked. See here:

https://github.com/lrstanley/liam.sh/blob/88c4f9aeb0caebc3f7ff79b3b65749385b9c2557/cmd/httpserver/public-new/nuxt.config.ts#L56-L85

Not sure how much extra work it is to maintain a dedicated module vs what I was doing before/making the other changes to fix the original issue.

lrstanley avatar Mar 12 '25 06:03 lrstanley

Do you still need to transpile anything with the module or the latest client? We've dropped the CJS build and it's now ESM only.

Regarding your approach, does it automatically import anything? I assume no. How do you feel about the import being from '#hey-api/sdk.gen.ts' by default? Side note, I'm meant to remove .gen from those files since it's assumed the whole module is generated.

The index issue is totally on my end, no tradeoffs for you. I guess when there's no index file, there'd be no auto import? This one seems the easiest to fix as I just need to check if the index file exists (it currently assumes it does hence the error)

mrlubos avatar Mar 12 '25 07:03 mrlubos

I don't need to have the transpile override in my config anymore. I assume it's because you're adding that transpile line inside of the module.

Switched everything over to auto imports, types, schema, and sdk. Works great. haven't tested manually importing anything/importing from the alias yet. Does it still need an output path? If so, wonder if there is a way to generate it so it goes into the .nuxt folder/is hidden out of view from the user, otherwise they might still try importing the normal way (from the output path folder).

Haven't tried without the index file because it fails to run dev mode without it.

Will test other scenarios if I get a chance tomorrow.

lrstanley avatar Mar 12 '25 07:03 lrstanley