ERR_UNSUPPORTED_DIR_IMPORT when loading component that uses LineVis from @h5web/lib

[jacobfilik]

I'm quite new to React and testing, but I have a basic application (using Vite, pnpm and Vitest) and am trying to run some simple unit tests on the components.

As soon as I try and load a component that contains LineVis from h5web/lib I get:

Error: Directory import '/{project}/node_modules/.pnpm/@h5web+lib@10.1.0_@react-three+fiber@8.15.15_@types+react@18.2.48_react-dom@18.2.0_react@18.2_3dyuhwpq4cb4qtk4xob4a2lzmi/node_modules/react-icons/fi' is not supported resolving ES modules imported from /{project}/node_modules/.pnpm/@h5web+lib@10.1.0_@react-three+fiber@8.15.15_@types+react@18.2.48_react-dom@18.2.0_react@18.2_3dyuhwpq4cb4qtk4xob4a2lzmi/node_modules/@h5web/lib/dist/index.mjs
Did you mean to import react-icons@4.12.0_react@18.2.0/node_modules/react-icons/fi/index.js?
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { url: 'file://{project}/node_modules/.pnpm/@h5web+lib@10.1.0_@react-three+fiber@8.15.15_@types+react@18.2.48_react-dom@18.2.0_react@18.2_3dyuhwpq4cb4qtk4xob4a2lzmi/node_modules/react-icons/fi', code: 'ERR_UNSUPPORTED_DIR_IMPORT' }
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Any ideas on what I need to do to get these tests to run?

[axelboc]

Hi @jacobfilik, we had this problem before but with older webpack versions. I'm surprised it happens with Vite (well, Vitest).

Luckily, react-icons recently published a new major version that uses ESM strictly. Let's see if that fixes it. I've just upgraded react-icons and published a beta version of @h5web/lib: 10.2.0-beta.0. Can you please give it a go?

If it doesn't fix it, would you be able to replicate your issue in a sandbox so I can try to debug it? We have a Vite sandbox already, so you could fork it, make sure all the versions match your own set-up in package.json, and add a basic Vitest test to it.

[jacobfilik]

Adding a simple test to a fork of your sandbox app worked file (not used codesandbox before but it should be here. This suggests its an issue with my project. I will try the sandbox code on my workstation and then look at the differences with the project that is not working.

[jacobfilik]

Hmm, works if I drop down to the same version as the sandbox 10.0.0, but not for 10.1.0 ...

[jacobfilik]

Yeah, updating the sandbox to 10.1.0 shows the issue when running the tests

[axelboc]

Right, yeah, that's because the JS bundle is now ESM: https://github.com/silx-kit/h5web/pull/1528/files — so Vitest expects everything that's imported from the bundle to be ESM as well, which it isn't. I should switch to lodash-es. For the time being, server.deps.inline should allow you to work around the issue.

[jacobfilik]

Ok, great, ill give it a shot, thanks for your help!

[jacobfilik]

Hi @axelboc,

Thanks for looking into this! Updating to the beta, the app ran fine, vitest gave:

`SyntaxError: Named export 'castArray' not found. The requested module 'lodash' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'lodash';
const { range: K, isNumber: tr, clamp: Yn, castArray: $e, throttle: er } = pkg;`

I will have a look at the sandbox tomorrow.

[axelboc]

I think this sort of error should be solvable with server.deps.inline in your config: https://vitest.dev/config/#server-deps-inline

[axelboc]

I've just published 10.2.0-beta.2 which removes the lodash warning, as well as another one caused by react-aria-menubutton. I've updated the original codesandbox to add Vitest and confirmed that it now works as expected: https://codesandbox.io/p/devbox/h5weblib-vite-xru04

Note that I've added "type": "module" to the sandbox' package.json to solve a deprecation warning from Vitest.

[jacobfilik]

Thanks @axelboc , I can confirm updating to the beta has solved these issues. Thanks for sorting this so quickly!

[axelboc]

No worries, my pleasure 😊

[axelboc]

Stable v11 now available with the fix 😉