No, no es necesario que los componentes se exporten por defecto para poder cargarlos de forma dinámica. Podemos exportarlos de forma nombrada y cargarlos de forma dinámica... pero no es lo más recomendable ya que el código necesario es mucho más lioso.
// button.jsx
// exportamos el componente Button de forma nombrada
export function Button() {
return <button>Botón cargado dinámicamente</button>
}
// app.jsx
import { lazy, Suspense } from 'react'
// Al hacer el import dinámico, debemos especificar el nombre del componente que queremos importar
// y hacer que devuelva un objeto donde la key default pasar a ser el componente nombrado
const Button = lazy(
() => import('./button.jsx')
.then(({Button}) => ({ default: Button }))
)
export default function App () {
return (
<div>
<Suspense fallback={<div>Cargando botón...</div>}>
<Button />
</Suspense>
</div>
)
}
Otra opción es tener un fichero intermedio que exporte el componente de forma por defecto y que sea el que importemos de forma dinámica.
// button-component.jsx
// exportamos el componente Button de forma nombrada
export function Button() {
return <button>Botón cargado dinámicamente</button>
}
// button.jsx
export { Button as default } from './button-component.jsx'
// app.jsx
import { lazy, Suspense } from 'react'
const Button = lazy(() => import('./button.jsx'))
export default function App () {
return (
<div>
<Suspense fallback={<div>Cargando botón...</div>}>
<Button />
</Suspense>
</div>
)
}