Import error in the latest svelte / vite versions

[AlessioGr]

Sveltekit changed some vite stuff in their latest versions which are probably causing this error - didn't happen with earlier versions:

/Users/alessiogravili/Documents/GitHub/wheelcosmos-svelte/node_modules/.pnpm/bigger-picture@1.0.5/node_modules/bigger-picture/src/bigger-picture.js:1
import BiggerPicture from './bigger-picture.svelte'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)

I'm getting the same error with BiggerPicture v1.1.2.

[henrygd]

Thanks for the heads up. I'll try to get it figured out this weekend.

[henrygd]

Just looked into it.

Seems to be a bug in vite according to this sveltekit issue: https://github.com/sveltejs/kit/issues/5549

There are workarounds in that thread and a maintainer confirmed that a fix was merged and will be released soon.

For bigger-picture specifically, you may be able to import dist/bigger-picture.mjs rather than src/bigger-picture.js. Then change back when the fix is out.

Hopefully that works for you. If you don't mind, I would like to keep this issue open for a week or so in case anyone else runs into the same problem.

[henrygd]

Update: tested in latest sveltekit and turns out the file extension needs to be .mjs to be treated as a module because the package isn't specified as a module in package.json.

I'll fix it via package.json in the next release, probably out Sunday.

You'll still get the error in the above sveltekit issue until the next vite version is released, so I recommend importing dist/bigger-picture.mjs until then.

[henrygd]

Resolved on this end in 1.1.4

Until the next Vite release, use

import BiggerPicture from "bigger-picture"

When their fix is released, you should be able to change to

import BiggerPicture from "bigger-picture/svelte"

[AlessioGr]

```js
import BiggerPicture from "bigger-picture"

Hey, I've tried it out again with vite 3.0.4 but got the following error:

Unknown file extension ".svelte" for /Users/alessiogravili/Documents/GitHub/wheelcosmos-svelte/node_modules/.pnpm/bigger-picture@1.1.4/node_modules/bigger-picture/src/bigger-picture.svelte
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /Users/alessiogravili/Documents/GitHub/wheelcosmos-svelte/node_modules/.pnpm/bigger-picture@1.1.4/node_modules/bigger-picture/src/bigger-picture.svelte
    at new NodeError (node:internal/errors:372:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
    at defaultLoad (node:internal/modules/esm/load:21:20)
    at ESMLoader.load (node:internal/modules/esm/loader:407:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:326:22)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:345:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:304:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:82:21)

It works with import BiggerPicture from "bigger-picture" but not with import BiggerPicture from "bigger-picture/svelte"

[henrygd]

Thanks, seems it never got fixed in vite after all.

Importing without /svelte is likely importing the vanilla version. Which is identical, just slightly larger.

From quickly browsing other issues about this, the fix on the library side is adding a svelte field in package.json and using the default import statement.

I'll have time to test in 7-8 hours and will release a new version if that works. Hopefully one day vite won't require a nonstandard field that breaks exports.

[henrygd]

Should work now in 1.1.5.

Tested in SvelteKit with Vite 3.0.4 and both bigger-picture and bigger-picture/svelte are importing the Svelte version.

If you could just confirm on your end we should be able to close this :+1:

[AlessioGr]

import BiggerPicture from "bigger-picture/svelte"

Sorry for the late reply! For some reason, neither works anymore. Clicking on an image now gives me this error:

[henrygd]

To be honest I don't know what's going on there.

I just moved to a new city and don't have much time to investigate. Maybe this weekend. I know it works with the basic SvelteKit demo app and I'll upload a working repo for reference.

If this is breaking your project I can add an export to allow explicit import of the vanilla version for the time being.

[henrygd]

@AlessioGr I've finally had some time to test today with SvelteKit and can't figure out how to replicate this.

I did add a way to explicitly import the vanilla version just now in 1.1.6, which should allow it to function normally until we get the error figured out:

import BiggerPicture from "bigger-picture/vanilla"

Can you tell me which versions of vite, svelte, and @sveltejs/kit are running in your project? If you can post the repo or email the relevant parts to me in a secret gist that would help, but if you don't want to that's totally fine and understandable.

[AlessioGr]

@AlessioGr I've finally had some time to test today with SvelteKit and can't figure out how to replicate this.

I did add a way to explicitly import the vanilla version just now in 1.1.6, which should allow it to function normally until we get the error figured out:

import BiggerPicture from "bigger-picture/vanilla"

Can you tell me which versions of vite, svelte, and @sveltejs/kit are running in your project? If you can post the repo or email the relevant parts to me in a secret gist that would help, but if you don't want to that's totally fine and understandable.

Hey, I'm always using the latest of everything, updating daily. I've sent you an invite to my GitHub repository, where I'm using BiggerPicture (I'm initializing it in my +layout.svelte). Would be great if you could check it out - maybe I'm doing something else wrong. Though now, while I can click on the images, it gives me some weird insertBefore error in the console.

I hope that you can reproduce it too with it

[henrygd]

Thanks, took a quick look and I should be able to sort it out. I'll try to get back to you tomorrow.

[henrygd]

Closing as all issues have been resolved. I'll add SvelteKit examples to the repo in the near future to make it easier to integrate.