Importing `@sveltejs/gl` during dev raises an exception

Describe the bug Importing @sveltejs/gl during dev raises the following exception:

500

Must use import to load ES Module: /home/ushi/repos/sveltexr/node_modules/@sveltejs/gl/index.mjs

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/ushi/repos/sveltexr/node_modules/@sveltejs/gl/index.mjs
    at new NodeError (node:internal/errors:329:5)
    at Module.load (node:internal/modules/cjs/loader:971:11)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at nodeRequire (/home/ushi/repos/sveltexr/node_modules/vite/dist/node/chunks/dep-6e02b235.js:69041:17)
    at ssrImport (/home/ushi/repos/sveltexr/node_modules/vite/dist/node/chunks/dep-6e02b235.js:68999:20)
    at eval (/home/ushi/repos/sveltexr/src/routes/gl.svelte:9:31)
    at instantiateModule (/home/ushi/repos/sveltexr/node_modules/vite/dist/node/chunks/dep-6e02b235.js:69027:166)

This may occur with other ES modules as well.

To Reproduce

npm init svelte@next
npm i -D @sveltejs/gl

Add a gl.svelte route with the following

<script>
	import * as GL from '@sveltejs/gl';
<script>

Start the dev server and navigate to that route, (probably http://localhost:3000/gl).

Expected behavior Should import without exceptions

Information about your SvelteKit Installation:

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit --binaries --browsers

  System:
    OS: Linux 4.19 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (24) x64 AMD Ryzen Threadripper 2920X 12-Core Processor
    Memory: 22.71 GB / 31.30 GB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 15.8.0 - ~/.nvm/versions/node/v15.8.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 7.5.2 - ~/.nvm/versions/node/v15.8.0/bin/npm
  Browsers:
    Firefox: 83.0
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.65 
    svelte: ^3.29.0 => 3.36.0 

Severity Blocking usage of svelte/gl and probably other ES based modules

Additional context Discord thread: https://discord.com/channels/@me/474342761529606144/826909912884969482

[benmccann]

Thanks for looking into this Rich and for testing all the suggestions @saabi

I’m going to go ahead and close this since it’s working for you now in favor of https://github.com/sveltejs/kit/issues/904 which should be a longer-term solution to the issue

[saabi]

@Rich-Harris That worked for me as well.

I’m completely new to Vitejs. I also had no idea rollup plugins would work out of the box, like for glslify. Good to know, thanks!