1

good evening I have developed a solution to simplify the use of multiple components in react thanks to loadable component it works perfect but in terms of typing I can't do the dynamic import

import loadable, { LoadableComponent } from "@loadable/component"

const bulk = (name: string) => {

  type params = import("./components/nameOfComponent").params // Ok

  //String literal expected.ts(1141)
  //type params = import(`./components/${name}`).params      // fail

  const Component = (params: params): JSX.Element => {

    const Raw: LoadableComponent<params> = loadable(() => import(`./components/${name}`))

    return <Raw {...params} />
  }

  return Component
}

const Container = bulk('nameOfComponent')

const App = () => {
  return (
    <div>
      <Container />
    </div>
  )
}

I understand that the @loadable/component library manages to obtain the correct typing I would like to apply it in the same way I would like to hear some suggestions

0 Answers0