Estoy creando una biblioteca simple de componentes de React y necesito publicar como paquete ES Module only en NPM. Como estoy usando React 17, he usado la nueva transformación JSX. Uso rollup y mecanografiado para generar el paquete ES. El archivo JS generado se ve así:

 // ./dist/index.js import { jsx, jsxs } from 'react/jsx-runtime'; import { forwardRef } from 'react'; import { SVGIcon } from './SVGIcon.js'; const Add = forwardRef(function Add(props, ref) { return (jsx( /* */)); }); const Bell = forwardRef(function Add(props, ref) { return (jsx( /* */)); });

Esto se ve bien. El compilador de TypeScript agrega jsx-runtime al código generado:

 import { jsx, jsxs } from 'react/jsx-runtime';

Sin embargo, el problema ocurre cuando trato de usar esta biblioteca en otra aplicación. Webpack se queja de que no puede encontrar 'react/jsx-runtime' . El error exacto es este:

 error - Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/hp/test/node_modules/react/jsx-runtime' imported from /home/hp/test/node_modules/@hrp/icons/dist/index.js Did you mean to import react/jsx-runtime.js?

No se queja de react . Cuando cambio la extensión del módulo importado manualmente (agregando la extensión .js ) a 'react/jsx-runtime.js' , entonces funciona.

Entonces, ¿cómo configurar el resumen o cualquier otro paquete de módulos para agregar la extensión de nombre de archivo adecuada para las importaciones de rutas secundarias de módulos de terceros?