phosphor-icons / react

A flexible icon family for React

Home Page:https://phosphoricons.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Jest test fails if importing directly from `/dist` folder

markmssd opened this issue · comments

(This was already reported in a related issue, #62, but I think it's different because I don't use NextJS).

I am trying to use @swc/plugin-transform-imports to automatically transform the imports and hoping to speed up my Jest tests.

However it's always failing with the same error as the OP of the related issue, Cannot find module '@phosphor-icons/react/dist/csr/Horse' from ....

The reason why I'm doing this is that it seems barrel imports can be a huge slow down for Jest tests, as explained in jestjs/jest#11234.

              '@swc/plugin-transform-imports',
              {
                '@phosphor-icons/react': {
                  transform: '@phosphor-icons/react/dist/{csr|ssr}/{{member}}',
                  skip_default_conversion: true,
                },
                '@mui/icons-material': {
                  transform: '@mui/icons-material/{{member}}',
                },
              },

Note that it's also failing if I don't use @swc/plugin-transform-imports at all, and try to import the full path directly in my component as

import { Horse } from '@phosphor-icons/react/dist/csr/Horse';

If it helps, this is the transformed code:

const _Horse = _interop_require_default._(require("@phosphor-icons/react/dist/csr/Horse"));

For comparison, using the MUI icons, we can import directly as

import StarIcon from  '@mui/icons-material/Star'

and that will import the CommonJS icon.

Would you know if that can be supported somehow?

I see they're all compiled in a single file in @phosphor-icons/react/dist/index.cjs, thus maybe the solution would be to have all icons in different dist/cjs/*.js files instead, and that @phosphor-icons/react/dist/index.cjs requires them from there instead? I can attempt a PR if that makes sense!

Amazing library by the way!