Using index files causes duplicate imports on page and layout
Unanswered
Asian black bear posted this in #help-forum
Asian black bearOP
I have a demo of the bug I'm seeing on a larger project reproduced here:
https://codesandbox.io/p/sandbox/next-js-redundant-importing-793szd
If you inspect the language selector (the 'en' at the top) you'll see the
If you look at the
If I change the import in
to
I no longer get the duplicate CSS in the page and layout CSS files. I was hoping to avoid this but I'm not sure if I can. Has anyone run into this and is there a solution I'm missing?
https://codesandbox.io/p/sandbox/next-js-redundant-importing-793szd
If you inspect the language selector (the 'en' at the top) you'll see the
.picker
class is duplicated in both the page and layout CSS files. I've narrowed down the cause to using an index file and if I just import each piece from it's file directly it all works, however that makes imports way more verbose and I'd like to avoid that.If you look at the
language
feature folder you'll see a root-level index.ts
that re-exports the language
helper file and the LanguagePicker
component. The LangaugePicker
gets used in the Header
component (used in layout.tsx
) . The languages
array is used on the /[lang]/page.tsx
file and in the LanguagePicker
component.If I change the import in
page.tsx
from:import { languages } from "@/features/language/";
to
import { languages } from "@/features/language/helpers/languages";
I no longer get the duplicate CSS in the page and layout CSS files. I was hoping to avoid this but I'm not sure if I can. Has anyone run into this and is there a solution I'm missing?