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

[saabi]

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

[samccone]

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

Can you share the stack trace when you import via es modules import * ...? this should be fixable

[saabi]

@samccone

The only relevant stack trace I get is included in the description above, which occurs when navigating to the route when running with the dev mode server.

[benmccann]

Try moving it between dependencies and devDependencies. Also try to include or exclude it in optimizeDeps. Hopefully if you try all the combinations one will work

[saabi]

@benmccann I tried the various combinations but to no avail.

[benmccann]

Hmm, it's weird that library would fail because it looks like it's already written in ESM format. I'm guessing that adding a module field to package.json and adding a "type": "module" would help.

We might also be able to file a feature request to have Vite recognize an .mjs entry point as being ES

Beyond that, the only other thing I could suggest is that it might also help to see if this can be reproduced in a Vite project without SvelteKit. It would have to be in an SSR project like https://github.com/sveltejs/vite-plugin-svelte/tree/main/packages/playground/vite-ssr

[benmccann]

@saabi would you be able to test this PR and see if it fixes the issue? sveltejs/gl#31

[saabi]

@benmccann Adding "module": "index.mjs", "type": "module", to @sveltejs/gl didn't work either. It keeps throwing the same exception.

[benmccann]

Thanks for testing it. One last thing, can you try adding it to ssr.external / ssr.noExternal?

I see a few lines from Vite in your stack trace, it looks like this is considered an external dependency and so Vite will try to require it which seems to be what's failing. I guess it should try to import it instead. If the ssr settings don't work (or maybe even if they do) this should probably be filed as a bug in Vite

[Rich-Harris]

This config change worked for me — no changes required to @sveltejs/gl:

const node = require('@sveltejs/adapter-node');
+const glslify = require('rollup-plugin-glslify');
-const pkg = require('./package.json');

/** @type {import('@sveltejs/kit').Config} */
module.exports = {
  kit: {
    // By default, `npm run build` will create a standard Node app.
    // You can create optimized builds for different platforms by
    // specifying a different adapter
    adapter: node(),

    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',

    vite: {
      ssr: {
-       noExternal: Object.keys(pkg.dependencies || {})
-     }
+       noExternal: ['@sveltejs/gl']
+     },
+     plugins: [
+       glslify()
+     ]
    }
  }
};

[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!

[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 #904 which should be a longer-term solution to the issue