package.json: type module, but no exports map

Describe the bug The ol package specifies in its package.json that it’s of type module. This means that any folder-style imports like import Map from 'ol/Map'; are prohibited when using it inside a project that itself is of type module. According to the documentation, they should work.

To Reproduce Steps to reproduce the behavior:

1. Clone https://github.com/maxicarlos08/sveltekit-ol
2. npm ci
3. npm run build
4. See error about an invalid directory import

Expected behavior Folder imports should work.

To make them work, you need to add an exports map to your package.json. Beware though, this means that anything not listed in the exports map is no longer accessible from the outside, so strictly speaking this would be a breaking change.

cc @maxicarlos08 who opened the issue over at https://github.com/sveltejs/kit/issues/3037

[tschaub]

As mentioned in sveltejs/kit#3037, here is a working index.svelte route with no modifications to the ol package (or any other):

<script>
  import "ol/ol.css"
  import Map from 'ol/Map.js';
  import View from 'ol/View.js';
  import OSM from 'ol/source/OSM.js';
  import Tile from 'ol/layer/Tile.js';
  import {browser} from '$app/env';
  import {onMount} from 'svelte';

  let target;
  let map;

  onMount(() => {
    if (browser) {
      const view = new View({center: [0, 0], zoom: 2});
      const layer = new Tile({source: new OSM()});
      map = new Map({target, view, layers: [layer]});
    }
  });
</script>

<div class="ol-container" bind:this={target} />

<style>
  :global(html, body, #svelte),
  div {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

The key difference between this example and and maxicarlos08/sveltekit-ol:

-       import { OSM } from 'ol/source';
+       import OSM from 'ol/source/OSM.js';

At some point it may also be possible to import {OSM} from 'ol/source.js'; (note the file extension). However, it looks like SvelteKit / Vite are also importing all the other modules that are imported and re-exported from the ol/source.js module (perhaps because there may be side effects). The one causing trouble is ol/source/GeoTIFF.js. We can make a change in this library to use Pool etc from the default export of the geotiff package, but the source also creates a worker using the Blob constructor, so it fails in Node.

Update: Even if we lazily create resources for the worker (avoiding references to Blob on import as in #13115), webpack and Node disagree on how to import things from the geotiff package.

webpack believes you should

import {Pool} from 'geotiff';

while Node believes you should

import geotiff from 'geotiff';

const Pool = geotiff.Pool;

Ideally this hardship could be avoided if tools let you completely opt out of SSR (like not even importing modules) for parts of your app that only work in a browser (maybe sveltejs/kit#1650 will bring this).

[tschaub]

There will probably continue to be things we can do to support importing ol modules in Node, but I’ll close this for now (I don’t think we need an exports map).