[Preact] [SWR] TypeError: Cannot read properties of undefined (reading '__H')

[dolie]

Describe the bug

Hello,

I'm unable to run Preact components using SWR, in test environnement (Vitest).
In dev/prod environnement Vite + Preact handles perfectly SWR, but not Vitest.
When I launch the test, it returns the error :
TypeError: Cannot read properties of undefined (reading '__H')

Expected behavior
Vitest + Preact handles SWR in a test environnement, as it is running in dev/prod environnement.

I opened an issue on PreactJS repo, it seems that vitest loads multiple copies of Preact, so it breaks because it needs to be a singleton.

Reproduction

Barebone example : https://github.com/dolie/preact-swr-vitest-bug

git clone git@github.com:dolie/preact-swr-vitest-bug.git
pnpm i
pnpm vitest

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M2
    Memory: 133.73 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.3 - ~/Library/n/bin/node
    Yarn: 1.22.19 - ~/Library/n/bin/yarn
    npm: 10.5.0 - ~/Library/n/bin/npm
    pnpm: 9.0.6 - ~/Library/n/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.61
    Safari: 17.5
  npmPackages:
    vite: ^5.2.2 => 5.2.13 
    vitest: ^1.6.0 => 1.6.0 

Preact
SWR
Vitest
MSW
Testing-library

Used Package Manager

pnpm

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.

[hi-ogawa]

This dual package issue is still partly due to preact's cjs/esm packaging and it cannot be fixed by alias.
Vite bundles it properly, but for example, node cannot handle it either. Here is a simpler reproduction with only use-sync-external-store:

• https://github.com/hi-ogawa/reproductions/tree/main/vitest-5915-preact-dual-package

Vitest + jsdom is still Vite SSR's Node emulation, so the same error is somewhat expected.

The workaround provided by Vite is to pre-bundle cjs deps and indeed this seems to help this case. Here is an updated version of your repro:
https://stackblitz.com/edit/github-zau6us?file=vite.config.js

import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact()],
  test: {
    globals: true,
    environment: 'jsdom',
    deps: {
      optimizer: {
        web: {
          enabled: true,
          include: ['swr', 'use-sync-external-store'],
        },
      },
    },
  },
});

[dolie]

Ultra clear explanations. 👌
I updated the repo with your fix, it is working.
Thank you for your help, and your fast answer 🚀