Unable to build project using OpenLayers with adapter-static recently

Describe the bug

I am using OpenLayers in my project to provide an interactive map, recently I did an npm upgrade @sveltejs/kit but then the build started failing with the following error:

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'project/node_modules/ol/control' is not supported resolving ES modules imported from project/.svelte-kit/output/server/chunks/trash-ff67d3fa.js
Did you mean to import ol/control.js?

The part causing the above exception is the following one:

import { Control } from 'ol/control';
import { Point } from 'ol/geom';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import OLMap from 'ol/Map';
import 'ol/ol.css';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Icon, Style } from 'ol/style';
import View from 'ol/View';

When changing all the imports to .js as suggested in the error message I get another error message.

Checking out a previous version of my package-lock.json fixes the issue (I can post it of you want it).

Reproduction

Github repo link
Run npm ci and start the dev server.

Note: The dev server randomly also shows some 500 errors and you might have to reload.

Logs

> maritschmeling-website@0.0.1 build
> svelte-kit build

vite v2.7.1 building for production...
transforming (450) node_modules/ms/index.js4:57:12 PM [vite-plugin-svelte] The following packages did not export their `package.json` file so we could not check the "svelte" field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file.
- @mapbox/mapbox-gl-style-spec
- @petamoriken/float16
- threads
✓ 455 modules transformed.
.svelte-kit/output/client/_app/manifest.json                                                 6.09 KiB
.svelte-kit/output/client/_app/pages/__error.svelte-ef4a05e6.js                              1.07 KiB / gzip: 0.59 KiB
.svelte-kit/output/client/_app/pages/index.svelte-45210160.js                                0.31 KiB / gzip: 0.24 KiB
.svelte-kit/output/client/_app/pages/__layout.svelte-4308bf6a.js                             5.69 KiB / gzip: 2.43 KiB
.svelte-kit/output/client/_app/pages/photography/index.svelte-02d4b79d.js                    3.40 KiB / gzip: 1.56 KiB
.svelte-kit/output/client/_app/pages/manage/index.svelte-39c96dee.js                         0.15 KiB / gzip: 0.15 KiB
.svelte-kit/output/client/_app/pages/about-me.svelte-42245ef1.js                             6.22 KiB / gzip: 2.04 KiB
.svelte-kit/output/client/_app/pages/photography/_category_.svelte-feaa01f0.js               2.28 KiB / gzip: 1.14 KiB
.svelte-kit/output/client/_app/pages/manage/__layout.reset.svelte-e4b2e085.js                5.95 KiB / gzip: 2.65 KiB
.svelte-kit/output/client/_app/start-9aff4962.js                                             21.43 KiB / gzip: 7.44 KiB
.svelte-kit/output/client/_app/pages/manage/images/_categoryId_.svelte-f59680a6.js           3.38 KiB / gzip: 1.59 KiB
.svelte-kit/output/client/_app/chunks/singletons-12a22614.js                                 0.05 KiB / gzip: 0.06 KiB
.svelte-kit/output/client/_app/pages/manage/trash/index.svelte-dfb979ad.js                   3.51 KiB / gzip: 1.56 KiB
.svelte-kit/output/client/_app/pages/manage/images/index.svelte-ad5fb0ea.js                  2.91 KiB / gzip: 1.32 KiB
.svelte-kit/output/client/_app/chunks/stores-aab542fe.js                                     0.38 KiB / gzip: 0.23 KiB
.svelte-kit/output/client/_app/pages/manage/categories/index.svelte-a47479c5.js              9.36 KiB / gzip: 3.78 KiB
.svelte-kit/output/client/_app/chunks/_fonts-596bf6a4.js                                     1.72 KiB / gzip: 0.84 KiB
.svelte-kit/output/client/_app/pages/trash.svelte-a03f4e92.js                                9.49 KiB / gzip: 3.95 KiB
.svelte-kit/output/client/_app/chunks/store-966a1526.js                                      1.01 KiB / gzip: 0.60 KiB
.svelte-kit/output/client/_app/assets/pages/__error.svelte-81bad67e.css                      0.37 KiB / gzip: 0.19 KiB
.svelte-kit/output/client/_app/chunks/_ManagePage-9664a100.js                                2.22 KiB / gzip: 1.02 KiB
.svelte-kit/output/client/_app/chunks/edit-b838e943.js                                       1.43 KiB / gzip: 0.78 KiB
.svelte-kit/output/client/_app/assets/_fonts-86ba6c2b.css                                    0.64 KiB / gzip: 0.33 KiB
.svelte-kit/output/client/_app/assets/pages/about-me.svelte-c6b8f3fc.css                     0.63 KiB / gzip: 0.30 KiB
.svelte-kit/output/client/_app/assets/pages/manage/images/_categoryId_.svelte-58798783.css   0.11 KiB / gzip: 0.10 KiB
.svelte-kit/output/client/_app/assets/pages/manage/__layout.reset.svelte-a9388888.css        2.19 KiB / gzip: 0.57 KiB
.svelte-kit/output/client/_app/assets/pages/photography/index.svelte-fd8da251.css            1.26 KiB / gzip: 0.55 KiB
.svelte-kit/output/client/_app/assets/_ManagePage-0834b20c.css                               0.94 KiB / gzip: 0.31 KiB
.svelte-kit/output/client/_app/assets/pages/photography/_category_.svelte-4dfc8c31.css       0.63 KiB / gzip: 0.31 KiB
.svelte-kit/output/client/_app/assets/pages/manage/images/index.svelte-3fbbe92c.css          0.31 KiB / gzip: 0.19 KiB
.svelte-kit/output/client/_app/assets/pages/__layout.svelte-97aeba32.css                     3.83 KiB / gzip: 1.08 KiB
.svelte-kit/output/client/_app/assets/pages/manage/categories/index.svelte-41a93207.css      1.30 KiB / gzip: 0.42 KiB
.svelte-kit/output/client/_app/assets/start-4030335c.css                                     0.15 KiB / gzip: 0.15 KiB
.svelte-kit/output/client/_app/assets/pages/trash.svelte-646d38ff.css                        6.41 KiB / gzip: 1.82 KiB
.svelte-kit/output/client/_app/chunks/vendor-d295715d.js                                     308.80 KiB / gzip: 78.29 KiB
vite v2.7.1 building SSR bundle for production...
✓ 80 modules transformed.
.svelte-kit/output/server/app.js                                     0.09 KiB
.svelte-kit/output/server/chunks/app-a78df28e.js                     20.52 KiB
.svelte-kit/output/server/chunks/index.json-d731b558.js              0.68 KiB
.svelte-kit/output/server/chunks/index-8a5b6824.js                   1.03 KiB
.svelte-kit/output/server/chunks/Category-7b59715f.js                0.48 KiB
.svelte-kit/output/server/chunks/Image-e80b0c9a.js                   1.40 KiB
.svelte-kit/output/server/chunks/connection-7de4d56c.js              0.15 KiB
.svelte-kit/output/server/chunks/index.json-a078a4c3.js              1.11 KiB
.svelte-kit/output/server/chunks/index.json-fdb655be.js              1.19 KiB
.svelte-kit/output/server/chunks/_imageId_.webp-673fb006.js          0.60 KiB
.svelte-kit/output/server/chunks/install-d8808ad0.js                 0.84 KiB
.svelte-kit/output/server/chunks/collections.json-88df11cf.js        1.26 KiB
.svelte-kit/output/server/chunks/collections-_id_.json-7618cfd0.js   0.74 KiB
.svelte-kit/output/server/chunks/__layout-fe87ad63.js                5.95 KiB
.svelte-kit/output/server/chunks/_fonts-63170ffa.js                  1.41 KiB
.svelte-kit/output/server/chunks/stores-5f6bc557.js                  0.60 KiB
.svelte-kit/output/server/chunks/__error-fe2eb0a9.js                 1.28 KiB
.svelte-kit/output/server/chunks/index-c2b69b27.js                   0.21 KiB
.svelte-kit/output/server/chunks/index-425421da.js                   3.09 KiB
.svelte-kit/output/server/chunks/_category_-da2e8eec.js              2.20 KiB
.svelte-kit/output/server/chunks/about-me-ae81537e.js                3.51 KiB
.svelte-kit/output/server/chunks/__layout.reset-966b8a44.js          5.55 KiB
.svelte-kit/output/server/chunks/store-75ce473f.js                   1.24 KiB
.svelte-kit/output/server/chunks/index-4d4e8c8c.js                   0.21 KiB
.svelte-kit/output/server/chunks/index-11844087.js                   6.14 KiB
.svelte-kit/output/server/chunks/edit-ff8cade9.js                    0.99 KiB
.svelte-kit/output/server/chunks/_ManagePage-66cd40bb.js             1.81 KiB
.svelte-kit/output/server/chunks/index-93337516.js                   1.76 KiB
.svelte-kit/output/server/chunks/_categoryId_-f8c11075.js            1.96 KiB
.svelte-kit/output/server/chunks/index-0e637f5f.js                   1.46 KiB
.svelte-kit/output/server/chunks/trash-ff67d3fa.js                   4.15 KiB

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-static
Executing (default): SELECT `id`, `name`, `backgroundImageId`, `createdAt`, `updatedAt` FROM `category` AS `CategoryModel`;
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'project/node_modules/ol/control' is not supported resolving ES modules imported from project/.svelte-kit/output/server/chunks/trash-ff67d3fa.js
Did you mean to import ol/control.js?
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:412:17)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36)
> 500 /trash (linked from /photography)
Error: 500 /trash (linked from /photography)
    at file://project/node_modules/@sveltejs/kit/dist/chunks/index4.js:86:11
    at visit (file://project/node_modules/@sveltejs/kit/dist/chunks/index4.js:222:5)
    at async visit (file://project/node_modules/@sveltejs/kit/dist/chunks/index4.js:293:6)
    at async visit (file://project/node_modules/@sveltejs/kit/dist/chunks/index4.js:293:6)
    at async prerender (file://project/node_modules/@sveltejs/kit/dist/chunks/index4.js:306:5)
    at async Object.prerender (file://project/node_modules/@sveltejs/kit/dist/chunks/index4.js:368:4)
    at async adapt (file://project/node_modules/@sveltejs/adapter-static/index.js:13:4)
    at async adapt (file://project/node_modules/@sveltejs/kit/dist/chunks/index4.js:393:2)
    at async file://project/node_modules/@sveltejs/kit/dist/cli.js:896:5

System Info

System:
    OS: Linux 5.15 Arch Linux
    CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
    Memory: 4.09 GB / 13.58 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Firefox: 95.0
  npmPackages:
    @sveltejs/adapter-static: ^1.0.0-next.18 => 1.0.0-next.21 
    @sveltejs/kit: next => 1.0.0-next.201 
    svelte: ^3.44.0 => 3.44.2

Severity

blocking an upgrade

Additional Information

Im using TypeScript in my project and the reproduction link, if this is relevant.

[tschaub]

In case others run across the same, here is a working index.svelte route:

<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 {onMount} from 'svelte';
  import {browser} from '$app/env';

  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>

No need to add exports to package.json or make any other modifications. I’ll add a bit more detail on what does and doesn’t work in openlayers/openlayers#13114.

[maxicarlos08]

Confirmed that this works in my project, thanks for your help!