Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Vite plugin: 'use-sync-external-store/shim/index.js' is not aliased, dev server crashes with react-aria

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#67 0 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
90/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
react, typescript, vite
Bereich
build-system

Rechercherichtung

Beginne in packages/redact/src/vite/index.ts und prüfe die ALIASES-Einträge für use-sync-external-store/shim. Füge dort die beiden vorgeschlagenen Dateipfad-Aliase hinzu und überprüfe dann, ob beide Specifier im Vite-Dev-Server zu @tanstack/redact aufgelöst werden. Fertig ist die Änderung, wenn die Reproduktion nicht mehr wegen des fehlenden Exports useSyncExternalStore abstürzt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Summary

react-aria, react-aria-components and react-stately import the use-sync-external-store shim by its file path:

import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";

The Vite plugin alias table does not contain this specifier. It contains use-sync-external-store/shim, but not use-sync-external-store/shim/index.js. The import therefore resolves to the real CJS shim.

In the dev server, the plugin also excludes use-sync-external-store* from optimizeDeps. The browser then loads the raw CJS file as ESM, and the root render crashes:

SyntaxError: The requested module '/node_modules/use-sync-external-store/shim/index.js?v=…'
does not provide an export named 'useSyncExternalStore'

The production build does not crash, because Rolldown converts the CJS file.

Reproduction
  1. Create a Vite + React SPA with redact() in plugins.
  2. Render any component from react-aria-components that uses useSyncExternalStore. Examples: Sheet, a toast region (useToastState), or a collection component (CollectionBuilder).
  3. Run vite (the dev server) and open the page.

Result: blank page and the error above. Expected: the shim resolves to @tanstack/redact, the same as use-sync-external-store/shim.

Workaround

Add the specifier as an alias in the app's vite.config.ts:

resolve: {
  alias: {
    "use-sync-external-store/shim/index.js": "@tanstack/redact",
  },
},

With this alias, our full e2e suite (66 Playwright tests) passes on Redact.

Suggested fix

Add these entries to ALIASES in packages/redact/src/vite/index.ts, before use-sync-external-store/shim:

'use-sync-external-store/shim/index.js': '@tanstack/redact',
'use-sync-external-store/index.js': '@tanstack/redact',
Versions
  • @tanstack/redact 0.2.0. The alias table on main (d56d87cb) has the same gap.
  • vite 8.3.4
  • react-aria 3.53.1, react-aria-components 1.22.1, react-stately 3.51.0
Vorherrschende Sprache
TypeScript
Sterne
408
Forks
13
Ø Merge
1 Std. 44 Min.
Gemergte PRs (30 T.)
21

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/redact

Alle Issues in TanStack/redact

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.