Import of OpenLayers modules fails under vitest

[mbeckem]

Reproduction

From another project (such as our starter repository):
In a file called foo.test.ts, add the following import (the dependency is set up correctly):

import {} from "@open-pioneer/map";

Expected

Nothing goes wrong.

Actual

Vitest / Node spits out:

FAIL  packages/sample-package/GreeterImpl.test.ts [ packages/sample-package/GreeterImpl.test.ts ]
Error: Cannot find module '/home/michael/projects/pioneer/starter/node_modules/.pnpm/@open-pioneer+map@0.5.0_@open-pioneer+chakra-integration@1.1.2_@open-pioneer+core@1.2.2_@open_qms6273nje5yniib5ukggtgs2i/node_modules/ol/proj/proj4' imported from /home/michael/projects/pioneer/starter/node_modules/.pnpm/@open-pioneer+map@0.5.0_@open-pioneer+chakra-integration@1.1.2_@open-pioneer+core@1.2.2_@open_qms6273nje5yniib5ukggtgs2i/node_modules/@open-pioneer/map/projections.js
Did you mean to import "ol/proj/proj4.js"?
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { code: 'ERR_MODULE_NOT_FOUND', url: 'file:///home/michael/projects/pioneer/starter/node_modules/.pnpm/@open-pioneer+map@0.5.0_@open-pioneer+chakra-integration@1.1.2_@open-pioneer+core@1.2.2_@open_qms6273nje5yniib5ukggtgs2i/node_modules/ol/proj/proj4' }
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Notes

• ol uses type: module in its package.json, so strictly speaking (as no exports are declared) all imports into ol must use the precise file name (including .js)
• Our current imports work in vite (which is very permissive) but not using node directly
• Vitest will import external packages (such as @open-pioneer/map in this case) via plain node import by default - for performance.
• It would be better if all our imports are exact so our packages can be imported that way. This could be enforced (or even automatically fixed) via tooling, see Prevent imports of unexported modules trails-core-packages#42.

Workaround

In vite.config.ts, configure vitest to inline (Docs) our trails packages:

{
    /// ...
    test: {
        server: {
            deps: {
                inline: [/@open-pioneer[/\\]/];
            }
        }
    }
}

This will make our package be imported via vite instead of node.

[mbeckem]

The immediate issue has been resolved by rewriting imports into open layers to "XYZ.js" during compilation (see open-pioneer/trails-build-tools#71).

However, the workaround above is still required because there are other dependencies (react-use, possibly more), that are not 100% compliant w.r.t. Node style ESM resolution. In the case of react-use, the package.json has a module field (which is not read by node, but by some bundlers) but lacks an exports field.

We'll have to wait and see what the Vitest does with dependency optimization, for the time being the workaround is still needed.