search

aprendendofelipe / tabnews

https://www.tabnews.com.br
MIT License
2 stars 0 forks source link

[ESM] Optimizing `@tabnews/ui` for Better Tree-Shaking #4

Open aprendendofelipe opened 3 weeks ago

aprendendofelipe commented 3 weeks ago
PT-BR 🇧🇷 A biblioteca `@tabnews/ui` acaba trazendo código desnecessário da `@primer/react` para o aplicativo Next.js. Isso acontece porque a `@tabnews/ui` exporta apenas a versão CJS, o que dificulta o tree-shaking. Exportamos apenas a versão CJS porque a `@primer/react` tem problemas com a separação entre as versões CJS e ESM. Se exportarmos a versão ESM da `@tabnews/ui`, o Next.js prioriza essa versão, mas tem dificuldade para analisar o código ESM da `@primer/react`, tratando-o erroneamente como CJS, resultando em um erro de sintaxe no primeiro `import`. Acredito que a raiz do problema é que a `@primer/react` usa a extensão `.js` para ambas as versões (CJS e ESM) e não especifica o `type` em seu `package.json`. O ideal é que isso seja corrigido na `@primer/react`. Pode haver maneiras de contornar esse problema com alguma customização do processo de _build_ do Next.js, mas acredito que o custo de fazer isso pode superar o de importar código morto da `@primer/react`. ---

The @tabnews/ui package ends up bringing unnecessary code from @primer/react into the Next.js App. This happens because @tabnews/ui only exports the CJS version, which hinders tree-shaking.

We export only the CJS version because @primer/react has issues with the separation between CJS and ESM versions. If we export the ESM version of @tabnews/ui, Next.js prioritizes that version, but it struggles to analyze the ESM code of @primer/react, mistakenly treating it as CJS, resulting in a syntax error with the first import.

I believe the root of the issue is that @primer/react uses the .js extension for both versions (CJS and ESM) and does not specify the type in its package.json. Ideally, this should be fixed within @primer/react. There might be ways to work around this issue with some customization of Next.js's build process, but I believe the cost of doing so could outweigh that of importing dead code from @primer/react.

Rafatcb commented 3 weeks ago

We're depending on https://github.com/primer/react/issues/3565, right?