Error occurred after updating 3.9

[Ciscodefran]

Environment

• Operating System: Darwin
• Node Version: v18.18.0
• Nuxt Version: 3.9.0
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: bun@1.0.20
• Builder: -
• User Config: devtools, modules, primevue, css, components, imports, i18n, supabase, runtimeConfig, experimental, vite, testUtils
• Runtime Modules: @vueuse/nuxt@10.7.1, @nuxtjs/supabase@1.1.4, @nuxtjs/eslint-module@4.1.0, @nuxtjs/i18n@8.0.0-rc.5, @nuxtjs/stylelint-module@5.1.0, @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.0, @element-plus/nuxt@1.0.7, nuxt-icon@0.6.8, @samk-dev/nuxt-vcalendar@1.0.2, @nuxt/image@1.1.0, nuxt-primevue@0.2.2, dayjs-nuxt@2.1.9, @nuxt/test-utils/module@3.9.0
• Build Modules: -

Reproduction

update the package to 3.9.0. and put '@nuxt/test-utils/module' into modules in nuxt.config.
then in some reasons, it goes error when nuxt modules trying to import explicitly from #imports or #build.

Describe the bug

I just updated test-utils as nuxt-vitest archived, and set config like you mentioned.
and running nuxt, it goes error.

Additional context

No response

Logs

Could not resolve "#imports"

    node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:5:46:
      5 │ import { defineComponent, useRouter, h } from '#imports';
        ╵                                               ~~~~~~~~~~

  You can mark the path "#imports" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "#build/root-component.mjs"

    node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:6:21:
      6 │ import NuxtRoot from '#build/root-component.mjs';
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "#build/root-component.mjs" as external to exclude it from the bundle, which
  will remove this error and leave the unresolved path in the bundle.
-------------------------------------------
error while updating dependencies:                                                            2:11:00 PM
Error: Build failed with 2 errors:
node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:5:46: ERROR: Could not resolve "#imports"
node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:6:21: ERROR: Could not resolve "#build/root-component.mjs"

[AlbertBrand]

Currently facing the same issue. The workaround I found is to remove the "@nuxt/test-utils/module" module from nuxt.config.ts. This removes the Vitest UI from the Nuxt devtools and does not affect testing from the console.

It seems that the module plugin tries to follow imports, however it does not understand the virtual #imports and others. This might be a timing thing? I'm sure @danielroe has a better understanding.

[rafaelmagalhaes]

currently started facing the same issue, removing it from nuxt.config helped

[Ciscodefran]

@rafaelmagalhaes But the problem is that when running a test, it fails to load #imports from in @nuxt/test-utils/dist/runtime-utils/index.js.

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/test-utils/tree/main/examples/app-vitest
👉 https://stackblitz.com/github/nuxt/test-utils/tree/main/examples/app-jest
👉 https://stackblitz.com/github/nuxt/test-utils/tree/main/examples/module

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[AlbertBrand]

I'll create a reproduction repo tomorrow. I think this has to do with test code in a project importing test-utils code.

[AlbertBrand]

Finally got it reproduced here: https://stackblitz.com/edit/github-3etpwp?file=nuxt.config.ts,pages%2Fapp.nuxt.spec.ts

At first I could not get the repro repo to trigger an error on run dev, but then I noticed in my own project I have a test in the pages folder that calls mockNuxtImport with useRoute. Placing the test in the pages folder triggers the behavior. If the test is outside the pages folder the @nuxt/test-utils module runs fine at startup.

The error:

✘ [ERROR] Could not resolve "#imports"

    node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:5:46:
      5 │ import { defineComponent, useRouter, h } from '#imports';
        ╵                                               ~~~~~~~~~~

  You can mark the path "#imports" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "#build/root-component.mjs"

    node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:6:21:
      6 │ import NuxtRoot from '#build/root-component.mjs';
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "#build/root-component.mjs" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✔ Nitro built in 1171 ms                                                                                                                               nitro 11:59:45

 ERROR  error while updating dependencies:                                                                                                                    11:59:45
Error: Build failed with 2 errors:
node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:5:46: ERROR: Could not resolve "#imports"
node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:6:21: ERROR: Could not resolve "#build/root-component.mjs"
    at failureErrorWithLog (/home/projects/github-3etpwp/node_modules/esbuild/lib/main.js:1641:15)
    at eval (/home/projects/github-3etpwp/node_modules/esbuild/lib/main.js:1049:25)
    at eval (/home/projects/github-3etpwp/node_modules/esbuild/lib/main.js:1517:9)

Could it be that the the Nuxt import mocking messes with the generated vue-router code? Seems like an order thing.

[danielroe]

This should now be resolved via #726.

[AlbertBrand]

Just tested this on the test repo I created. The above error is now gone when running the tests, however a new error pops up when starting the project:

https://stackblitz.com/edit/github-3etpwp?file=package.json

 ERROR  This module cannot be imported in the Vue part of your app. [importing @nuxt/test-utils/runtime from pages/app.nuxt.spec.ts]

The error does not seem to have effect on the app startup itself (it's probably more a warning).

Again this error goes away when moving the test out of the pages folder.

@danielroe Should I create a new issue or do you want to reopen this one?

[danielroe]

Do open a new issue 🙏

We can probably resolve this easily.

[Ciscodefran]

@AlbertBrand Same issue here :(

[AlbertBrand]

Created #747

[muffincode]

I'm still experiencing the issue mentionned on Jan 12, with
"@nuxt/test-utils": "3.12.0",
and "@nuxtjs/tailwindcss": "^6.11.4"

I tried what's mentionned here but it doesn't do the trick

I'll try to create a reproduction

[rafadpedrosa]

I guys, I was having the same error, so, I tried a different approach and it worked for me.

Well, it's a workaround - I think - but maybe it can help anyone who needs. Try to use pnpm instead.

my gitlab-ci

image: node:lts

stages:
  - test
  - deploy
  - rollback

# **MY CHANGES** Functions that should be executed before the build script is run
before_script:
  - npm -g install pnpm
  - pnpm install

test-unit:
  stage: test
  script:
    - pnpm run test

pages:
  stage: deploy
  script:
    - pnpm run generate
  artifacts:
    paths:
      # The folder that contains the files to be exposed at the Page URL
      - .output/public
  publish: .output/public
  rules:
    # This ensures that only pushes to the default branch will trigger
    # a pages deploy