Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta Para iniciantes
#67 0 comentários 1 reação 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
90/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
react, typescript, vite
Domínio
build-system

Direção de pesquisa

Comece em packages/redact/src/vite/index.ts e examine as entradas de ALIASES para use-sync-external-store/shim. Adicione ali os dois aliases de caminho de arquivo sugeridos e, em seguida, verifique se ambos os specifiers são resolvidos para @tanstack/redact no servidor de desenvolvimento do Vite. O trabalho estará concluído quando a reprodução não falhar mais por causa da exportação useSyncExternalStore ausente.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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
Linguagem predominante
TypeScript
Estrelas
408
Forks
13
Merge médio
1h 47min
PRs com merge (30d)
22

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TanStack/redact

Todas as issues de TanStack/redact

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.