Esto es muy extraño. Durante mi intento de dividir el código, encontré esto:
const g = "bi"; const importStr = `react-icons/${g.toLowerCase()}`; console.log(importStr); console.log(importStr === `react-icons/bi`); import(importStr).then(module => { console.log(module); }); import(`react-icons/bi`).then(module => { console.log(module); });En el código anterior, si importo "importStr", la importación genera un error:
Error no capturado (en promesa): no se puede encontrar el módulo 'react-icons/bi'
Pero si importo directamente "react-icons/bi", entonces no hay problema. Como ves,
importStr === `react-icons/bi`¿Por qué y cómo soluciono esto? En realidad, no puedo usar directamente "react-icons/bi" porque g es dinámico y podría tomar otros valores.
Cito del siguiente comentario
Webpack realiza un análisis estático en el momento de la compilación. No intenta inferir variables que esa importación (prueba) podría ser cualquier cosa, de ahí la falla. También es el caso de import(ruta+"a.js").
Debido a la función de agitación del árbol, el paquete web intenta eliminar todo el código no utilizado del paquete. Eso también significa que algo similar podría funcionar.
import("react-icons/" + g)Editar: según su sugerencia, actualizo esto a
import("react-icons/" + g.toLowerCase()+ '/index.js')Una manera fácil de implementar la división de código en React es con carga diferida, como se ve aquí (esto podría ser más fácil que importar una cadena dinámica):
const OtherComponent = React.lazy(() => import('./OtherComponent')); Esta implementación cargará el paquete con OtherComponent solo cuando se represente por primera vez.
Ejemplo de reactjs.org:
import React, { Suspense } from 'react'; const OtherComponent = React.lazy(() => import('./OtherComponent')); const AnotherComponent = React.lazy(() => import('./AnotherComponent')); function MyComponent() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <section> <OtherComponent /> <AnotherComponent /> </section> </Suspense> </div> ); }