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?