Estoy trabajando en una aplicación web JS y estoy tratando de usar el campo de exports en un archivo package.json para limpiar las declaraciones de importación de mi módulo.

Aquí está mi estructura de directorios:

 --> my-package-folder --> src --> index.js --> color --> index.js --> ui --> index.js

Me gustaría poder importar las subcarpetas de color y ui de esta manera:

 import * from '@project/my-package/color' import * from '@project/my-package/ui' // Instead of... // import * from '@project/my-package/src/color/index.js' // import * from '@project/my-package/src/ui/index.js'

Aquí hay un fragmento de mi paquete.json:

 "name": "@project/my-package", "version": "1.0.0", "main": "./src/index.js", "type": "module", "exports": { "./color": "./src/color/index.js", "./ui": "./src/ui/index.js" },

Por alguna razón, recibo un error de "no se puede resolver" cuando intento importar el color de las subcarpetas de ui :

 Module not found: Error: Can't resolve '@project/my-package/color'

El código que importa my-package aún puede importar @project/my-package , que se resuelve en ./src/index.js (especificado en el campo main ):

 import * from '@project/my-package' // This works

Es solo importar las subcarpetas de color y ui que es un problema.

Como prueba (solo para ver qué pasaría), eliminé el campo main y en su lugar coloqué su valor en el campo de exports :

 ".": "./src/index.js"

Pensé que si el campo de exports se estaba leyendo correctamente, entonces este cambio aún debería permitir que la importación @project/my-package funcione. Pero esto en realidad causó que @project/my-package ya no se pudiera resolver.

Me di cuenta de que gran parte de la documentación sobre el campo de las exports está orientada a las aplicaciones de node.js. Como no estoy trabajando en un proyecto de node.js, me pregunto si eso podría tener algo que ver con mi problema. Tal vez el campo de exports se comporte de manera diferente cuando se trabaja en un navegador.

¿Hay algo más que me estoy perdiendo? Actualmente, estoy ejecutando la aplicación que importa my-package localmente usando webpack-dev-server . ¿Quizás también deba actualizarse algo en el archivo de configuración de mi paquete web?