I am building a simple library of React components and need to publish as ES Module only package to NPM. Since I am using React 17, I have used new JSX transform. I use rollup and typescript to generate ES package. The generated JS file looks like this:

// ./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( /*  */));
});

This looks fine. The TypeScript compiler is adding the jsx-runtime to the generated code:

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

However, the problem happens when I try to use this library in another application. Webpack complains that it cannot find 'react/jsx-runtime'. The precise error is this:

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?

It doesn't complain about react. When I change extension of the imported module manually (adding .js extension) to 'react/jsx-runtime.js' then it works.

So, how to configure rollup or any other module bundler to add appropriate filename extension for subpath imports from third-party modules?