Jest test fails if files are imported from `/dist` folder

[phosphor-icons]

Jest test fails if files are imported from `/dist` folder

[rektdeckard]

Importing from dist is allowed, but only when it is truly an import, and not transpiled to a require, as I suspect is happening in jest. The submodule imports are an undocumented feature and were added to address issues with a few bundlers that do not tree-shake well. Is there a reason you can't keep the destructuring import?

[arobert93]

@rektdeckard I’m using the package in a Next.js app router project and I need to import them separately due to the tree-shake issue in development.

[rektdeckard]

Just pushed an experimental update that has CJS artifacts and should be natively discoverable by node enviroments. Please give it a try by installing version 2.1.3, or with npm i @phosphor-icons/react@next and LMK if that works.

[rektdeckard]

Note, you'll have to import them from /dist/ssr now

[mredigonda]

Hey @rektdeckard 👋🏼

Joining the thread since I have the exact same use-case for these kind of imports, and the exact same problem as OP (only difference is that I'm not using Next's app router), but sadly changing my imports to be from /dist/ssr instead didn't fix the issue :(

I think probably fixing the type problems mentioned by this other recent thread might help!

It seems no matter how I write the direct imports, it always fails either for the app itself, for the jest tests, or for the Storybook build.

Let me know if I can help in any way, and thanks for looking into this!

[rektdeckard]

@mredigonda it probably fixed the problem but showed another error, that no type declarations were found. That is what I encountered in testing, at least.

Types are now linked correctly thanks to #71 so you should find this to work in 2.0.14.

Note: just use @phosphor-icons/dist/{csr|ssr}/IconName import path

[mredigonda]

@rektdeckard awesome, thank you! Now it seems the code typechecks correctly, storybook and jest all working for me locally, but now I have some error messages when deploying to Vercel:

➤ YN0000: │ pprof@npm:3.2.1 STDERR node-pre-gyp WARN Hit error response status 404 Not Found on https://storage.googleapis.com/cloud-profiler/pprof-nodejs/release/v3.2.1/node-v108-linux-x64-glibc.tar.gz

And

➤ YN0000: │ ssh2@npm:1.11.0 STDOUT Usage Error: Couldn't find a script name "node-gyp" in the top-level (used by ssh2@npm:1.11.0). This typically happens because some package depends on "node-gyp" to build itself, but didn't list it in their dependencies. To fix that, please run "yarn add node-gyp" into your top-level workspace. You also can open an issue on the repository of the specified package to suggest them to use an optional peer dependency.

Are you aware of what the problem could be? Otherwise let me know and I can continue troubleshooting.

Thanks a lot!

[rektdeckard]

@mredigonda this looks like it could be linked to the Next compiler, as I have seen similar errors that trace back to using large component libraries (1000+ files) in their docs. I will try to find them.

Are you deploying on Vercel? Have you tried using modularizeImports or optimizePackageImports options?

[mredigonda]

@rektdeckard thanks for your insight! Yes I'm deploying to Vercel, sadly I don't have any single big package that can be reduced massively by using modularizeImports or optimizePackageImports (the latter is not even available for me as I'm using an older version that doesn't yet have it.

The effort to update the way I import from @phosphor-icons was indeed to improve in this regard, instead of having all icons be accidentally imported, I tried to import each icon separately, but yes at the moment the Vercel deploy just fails 😕.

I'm not sure how to move forward so I've postponed this one, but let me know if you have any ideas on what else I could try, and thanks again for your replies!

[markmssd]

Hey @rektdeckard, I'm having a similar issue, in my case 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, 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"));

Would you know if that can be supported somehow?

Thanks!

EDIT: 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!