Import errors with Vite 5

[polvi]

Hello, Thank you for all your work on the lib!

I wanted to try out a basic example. I created a fresh svelte app, installed the library, then edited the main page display the map from the README, and get the following error:

$ npm create svelte@latest demo-app # (selected Skeleton, typescript, ESLint, prettier)
$ cd demo-app
$ npm install
$ npm install svelte-maplibre
# copy code from README
$ pbpaste > src/routes/+page.svelte # paste from cli on a mac
$ npm run dev # then open http://localhost:5173/

> demo-app@0.0.1 dev
> vite dev


  VITE v5.0.10  ready in 424 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
o1:32:26 PM [vite-plugin-svelte] /Users/polvi/Code/demo-app/src/routes/+page.svelte:16:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.
1:32:27 PM [vite] Error when evaluating SSR module /node_modules/svelte-maplibre/dist/ImageSource.svelte: failed to import "maplibre-gl"
|- SyntaxError: [vite] Named export 'ImageSource' not found. The requested module 'maplibre-gl' 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 'maplibre-gl';
const {ImageSource} = pkg;

    at analyzeImportedModDifference (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50598:19)
    at nodeImport (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50549:9)
    at async ssrImport (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50444:24)
    at async eval (/Users/polvi/Code/demo-app/node_modules/svelte-maplibre/dist/ImageSource.svelte:7:31)
    at async instantiateModule (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50506:9)

1:32:27 PM [vite] Error when evaluating SSR module /node_modules/svelte-maplibre/dist/index.js: failed to import "/node_modules/svelte-maplibre/dist/ImageSource.svelte"
|- SyntaxError: [vite] Named export 'ImageSource' not found. The requested module 'maplibre-gl' 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 'maplibre-gl';
const {ImageSource} = pkg;

    at analyzeImportedModDifference (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50598:19)
    at nodeImport (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50549:9)
    at async ssrImport (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50444:24)
    at async eval (/Users/polvi/Code/demo-app/node_modules/svelte-maplibre/dist/ImageSource.svelte:7:31)
    at async instantiateModule (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50506:9)

1:32:27 PM [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "/node_modules/svelte-maplibre/dist/index.js"
|- SyntaxError: [vite] Named export 'ImageSource' not found. The requested module 'maplibre-gl' 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 'maplibre-gl';
const {ImageSource} = pkg;

    at analyzeImportedModDifference (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50598:19)
    at nodeImport (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50549:9)
    at async ssrImport (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50444:24)
    at async eval (/Users/polvi/Code/demo-app/node_modules/svelte-maplibre/dist/ImageSource.svelte:7:31)
    at async instantiateModule (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50506:9)

SyntaxError: [vite] Named export 'ImageSource' not found. The requested module 'maplibre-gl' 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 'maplibre-gl';
const {ImageSource} = pkg;

    at analyzeImportedModDifference (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50598:19)
    at nodeImport (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50549:9)
    at async ssrImport (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50444:24)
    at async eval (/Users/polvi/Code/demo-app/node_modules/svelte-maplibre/dist/ImageSource.svelte:7:31)
    at async instantiateModule (file:///Users/polvi/Code/demo-app/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:50506:9)

[dimfeld]

Probably related to #109, I'm hoping to work around it sometime this week.

[polvi]

Yup, the fix in #109 fixes the issue for me.

[dimfeld]

I’m actually going to reopen this until I can release a version that doesn’t require that setting in the vite config :)

[dimfeld]

Published 0.7.4, which should work without the Vite config workaround

[polvi]

confirmed fixed without the vite config change. Thank you! You rock!