Browser mode hanging on blank white screen, failing to load vitest/utils

[ludwigbacklund]

Describe the bug

When trying to run a test in browser mode (playwright) with a basic example next.js application, the browser window opens but hangs on a blank screen and fails to load vitest/utils in the background.

Reproduction

Reproduction repository, based on vitest next.js example: https://github.com/ludwigbacklund/vitest-browser-bug-repro

Just run yarn test, it will open a browser window and hang on a white screen. Check the console/network log.

System Info

System:
    OS: macOS 13.3
    CPU: (10) arm64 Apple M1 Pro
    Memory: 774.77 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nodenv/versions/16.13.1/bin/node
    Yarn: 1.22.15 - ~/.nodenv/versions/16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nodenv/versions/16.13.1/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Safari: 16.4
  npmPackages:
    @vitejs/plugin-react: latest => 3.1.0 
    @vitest/browser: ^0.29.8 => 0.29.8 
    vitest: latest => 0.29.8

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[Aslemammad]

Nice finding, I'm tracking it in #3100! I guess it's related, since it has the same issue with vitest/utils.

[ludwigbacklund]

@Aslemammad Thanks for taking a look at this. I'm still getting the same error though with the latest 0.30.0 version of vitest browser.

[Error] Unhandled Promise Rejection: TypeError: Importing a module script failed. (anonymous function) (index-b8629a79.js:685)

  System:
    OS: macOS 13.3
    CPU: (10) arm64 Apple M1 Pro
    Memory: 518.31 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nodenv/versions/16.13.1/bin/node
    Yarn: 1.22.15 - ~/.nodenv/versions/16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nodenv/versions/16.13.1/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Safari: 16.4
  npmPackages:
    @vitejs/plugin-react: latest => 3.1.0 
    @vitest/browser: ^0.30.0 => 0.30.0 
    vitest: ^0.30.0 => 0.30.0 

Reproduction: https://github.com/ludwigbacklund/vitest-browser-bug-repro

[Aslemammad]

@ludwigbacklund Could you create another issue for this?

[sheremet-va]

It's fine to do in the same issue.

[jd-solanki]

Just to avoid confusion, I'm at v0.30.1 and I don't error like this reply but original issue of blank screen still present. I'm using webdriverio.

Are we still tracking the original issue?

P.S. Browser mode is really convenient and make tests robust, Thanks for the implementation 🙏🏻

[Aslemammad]

It's weird because it was resolved for me, I need to check it again soon. Thank you so much.

[userquin]

@ludwigbacklund can you try adding this to your Vite config file?

  optimizeDeps: {
    exclude: ['vitest/utils'],
    include: ['@vitest/utils', 'vitest/browser'],
  },

https://github.com/userquin/vitest-browser-vue (not working with Vite 4.3 beta 5, I need to review the dependencies)

[userquin]

Updated repo adding vite-4.3 branch using Vite 4.3.0 beta 5

[jd-solanki]

Thanks @userquin for inspecting the issue 🙏🏻

@ludwigbacklund After adding below tests are runnig:

  optimizeDeps: {
    exclude: ['vitest/utils'],
    include: ['@vitest/utils', 'vitest/browser'],
  },

However, I'm getting unexpected errors like
[vite] Internal server error: [@vue/compiler-sfc] type argument passed to defineEmits() must be a function type, a literal type with call signatures, or a reference to the above types

when I runt he test in browser (without browser mode all tests are passing) mode with above config, I guess this will get resolved along when we resolve this.

Anyways, @userquin's code snippet does makes tests run, Thanks 😇

[userquin]

@jd-solanki I've it working on my local using a hack via vite-plugin-vue-type-imports plugin:

• add vite-plugin-vue-type-imports as dev dependency
• import it and wrap it with the code below

import VueTypeImports from 'vite-plugin-vue-type-imports'

const vueTypes = VueTypeImports()

plugins: [
    {
      name: 'fix-vue-sfc',
      enforce: 'pre',
      apply: (_, env) => env.mode === 'test',
      async resolveConfig(config) {
        await (vueTypes as any).resolveConfig(config)
      },
      async transform(code, id) {
        if (!/\.vue(\?.*)?$/.test(id))
          return

        return await (vueTypes as any).transform(code, id.slice(0, id.lastIndexOf('?')))
      },
    },
    VueMacros({...}),
    ...
],

[userquin]

@jd-solanki there is no need to include the hack, vue-macros has support for it:

VueMacros({
  betterDefine: {
    include: [/\.vue(\?v=\d+)?$/],
  },
  ...
})

[userquin]

@ludwigbacklund with your repo I'm getting this error when running the tests (installing vite 4.2.1 and latest vite react plugin):

[Ross-Esmond]

The exclude-include fix got me past the blank screen, but none of my tests run. Depending on the browser and provider, it either loads forever or just claims there are zero tests. I've tried changing the glob pattern and file names. Testing in node works fine.

[raythurnvoid]

Thanks @userquin for inspecting the issue 🙏🏻

@ludwigbacklund After adding below tests are runnig:

  optimizeDeps: {
    exclude: ['vitest/utils'],
    include: ['@vitest/utils', 'vitest/browser'],
  },

However, I'm getting unexpected errors like [vite] Internal server error: [@vue/compiler-sfc] type argument passed to defineEmits() must be a function type, a literal type with call signatures, or a reference to the above types

when I runt he test in browser (without browser mode all tests are passing) mode with above config, I guess this will get resolved along when we resolve this.

Anyways, @userquin's code snippet does makes tests run, Thanks 😇

This worked for me

[privatenumber]

After excluding vitest/utils from optimizeDeps, I get an error that format is not exported from pretty-format:

Uncaught (in promise) SyntaxError: The requested module '/node_modules/.pnpm/pretty-format@27.5.1/node_modules/pretty-format/build/index.js?v=f31c97dc' does not provide an export named 'format' (at index.js?v=f31c97dc:3:10)

Looks like the CommonJS version of pretty-format gets loaded in the browser so it's unable to detect the export.

I was able to fix this by installing @vitest/utils as a dev-dependency, but ideally I shouldn't have to. I'm using pnpm v8.2.0 which doesn't hoist.

Now I'm getting the error (even after wiping and reinstalling node_modules):

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:63315/@id/vitest/browser

[Ross-Esmond]

The problem is not fixed for me after upgrading to v31. Has the issue resolved for anyone else?

[yshrsmz]

Just adding @vitest/utils to devDependencies solved the issue for me. no need for optimizedDeps.