Tengo un proyecto Next.js configurado para resolver las importaciones que terminan en .web.js . Esto funciona fuera de mi directorio node_modules. Hice esto configurando resolve.extensions = ['.web.js, '.js', '.jsx'] en la configuración de mi paquete web. Entiendo que esta configuración es responsable de resolver las importaciones que no tienen una extensión, por ejemplo, import _ from './component' , cuando existe ./component.web.js .
También tengo algunos node_modules que usan esta extensión .web.js . Son módulos privados, pero la idea se mantiene. Digamos que nuestros node_modules se ven así. Puede valer la pena señalar que estos módulos ya se han transpilado y, como tal, el uso require en lugar de import .
- node_modules - @foo - bar.js - baz.web.js - baz.native.jsAhora digamos que tenemos lo siguiente:
// bar.js require("./baz"); Si trato de importar @foo/bar , la aplicación generará un error de módulo no encontrado en la línea require("./baz"); diciendo que no se puede encontrar. Si lo cambio a require("./baz.web.js") o elimino la línea por completo, entonces la aplicación funciona bien.
¿Por qué webpack puede hacer este tipo de resoluciones fuera de node_modules, pero no dentro del directorio? ¿Y cómo puedo decirle a webpack que también resuelva esas importaciones?
Dependiendo de la estrategia de resolución de su módulo, encontrará algunos archivos o no. Node.js resuelve los módulos como se describe aquí . Esto significa que require('./baz') se resuelve para solicitar /path/to/module/baz.js . Dado que su archivo en realidad no tiene nombre, no se encuentra. Puede usar require('./baz.web') en su lugar.
En cuanto a si Webpack puede manejar "automáticamente" qué importación usar, probablemente se deba a usar un complemento o tener algún tipo de lógica en bar.js para elegir entre baz.web y baz.native .