adapter-static fails with ESM config

[janosh]

npm init svelte@next test-esm-static
cd test-esm-static
mv svelte.config.cjs svelte.config.js
yarn add -D @sveltejs/kit@next @sveltejs/adapter-static@next

and changing the contents of svelte.config.js to

import adapter from "@sveltejs/adapter-static";

export default {
  adapter: adapter(),
  kit: {
    target: "#svelte",
  },
};

followed by svelte-kit (dev|build) throws

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in node_modules/@sveltejs/adapter-static/package.json imported from svelte.config.js
    at new NodeError (node:internal/errors:363:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:321:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:510:7)
    at packageResolve (node:internal/modules/esm/resolve:687:14)
    at moduleResolve (node:internal/modules/esm/resolve:739:18)
    at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:853:11)
    at Loader.resolve (node:internal/modules/esm/loader:89:40)
    at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:73:40)
    at link (node:internal/modules/esm/module_job:72:36)

I was expecting this to work now that #936 is merged but looks like the adapters still need updating?

[Rich-Harris]

#936 was a pre-requisite for the upcoming work to publish the adapters as ESM. Until that's done it's probably better to continue using .cjs, though if you really want to use ESM config you should be able to do this:

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

const adapter = require('@sveltejs/adapter-static');

[janosh]

Cool, I'll stick to .cjs then. Interestingly, with adapter-netlify both svelte-kit (dev|build) succeed but loading the page throws

index.mjs?v=7e80be82:202 Uncaught (in promise) TypeError: Cannot read property 'removeChild' of null
    at end_hydrating (index.mjs?v=7e80be82:202)
    at init (index.mjs?v=7e80be82:1548)
    at new Root (root.svelte? [sm]:16)
    at createProxiedComponent (svelte-hooks.js:245)
    at new ProxyComponent (proxy.js:240)
    at new Proxy<Root> (proxy.js:340)
    at Renderer._init (start.js:578)
    at Renderer.start (start.js:481)
    at async start (start.js:1007)

createRequire with adapter-static builds as well but then gives the same error loading the page.

[Rich-Harris]

That's likely due to a bug in Svelte 3.38.0 and 3.38.1 — should be fixed in 3.38.2

[janosh]

Nice, working now!

There's one more likely unrelated problem I noticed on nested routes. They appear to be requesting static assets prefixed by their directory name, i.e. /blog/[slug].svelte is requesting /blog/global.css and then receives a 500 status on svelte-kit preview.

> 500 /blog/global.css (linked from /blog/leaving-the-bubble)
Error: 500 /blog/global.css (linked from /blog/leaving-the-bubble)
    at error (node_modules/@sveltejs/kit/dist/chunks/index5.js:92:11)
    at visit (node_modules/@sveltejs/kit/dist/chunks/index5.js:159:5)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async visit (node_modules/@sveltejs/kit/dist/chunks/index5.js:219:6)
    at async visit (node_modules/@sveltejs/kit/dist/chunks/index5.js:219:6)
    at async visit (node_modules/@sveltejs/kit/dist/chunks/index5.js:219:6)
    at async visit (node_modules/@sveltejs/kit/dist/chunks/index5.js:219:6)
    at async visit (node_modules/@sveltejs/kit/dist/chunks/index5.js:219:6)
    at async visit (node_modules/@sveltejs/kit/dist/chunks/index5.js:219:6)
    at async visit (node_modules/@sveltejs/kit/dist/chunks/index5.js:219:6)
error Command failed with exit code 1.

It also causes that route's load function to be called with page path '/blog/global.css' for which of course no post data can be loaded. Not sure which happens first actually.

[TheBlueOompaLoompa]

I'm trying to use adapter static too, but weirdly when I try to use .cjs it spits out this error svelte.config.cjs should be renamed to svelte.config.js and converted to an ES module. See https://kit.svelte.dev/docs#configuration for an example.
When I do what it's telling me to it spits out

Malformed svelte.config.js
SyntaxError: Unexpected strict mode reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18)
    at async link (internal/modules/esm/module_job.js:47:21)

instead. I downgraded to adapter static 1.0.0-next.7 and it worked, but still got mad at me for using cjs. I don't know if my issue is related or not, but I thought this info may be helpful.

[janosh]

@TheBlueOompaLoompa Did you change your imports from ESM to CJS after renaming svelte.config.js? You need to use require with a .cjs file, e.g. const adapter = require('@sveltejs/adapter-static').

[TheBlueOompaLoompa]

Yes I did

[Rich-Harris]

@janosh sounds like you must have a relative <link rel="stylesheet" href="global.css"> somewhere? It should be an absolute href.

@TheBlueOompaLoompa can you paste your entire config file?

[TheBlueOompaLoompa]

This was working yesterday until I ran npm ci today because of github actions, I think I first installed packages about 4-5 days ago.

const preprocess = require('svelte-preprocess');
const static = require('@sveltejs/adapter-static');

/** @type {import('@sveltejs/kit').Config} */
module.exports = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte',
		adapter: static()
	}
};

Also I would like to point out that after downgrading adapter static to 1.0.0-next.7 from 1.0.0-next.8 it worked.

[Conduitry]

https://github.com/sveltejs/kit/blob/master/packages/adapter-static/CHANGELOG.md#100-next8 The change in next.8 was that the adapter was rewritten from CJS to ESM, which means that you can no longer require() it, so that's not surprising. ESM will be what everything will be in going forward, so you should upgrade the adapter, update your svelte.config.cjs to svelte.config.js and rewrite it as ESM and update your requires to imports, and then see whether you're still having problems.

[TheBlueOompaLoompa]

I did try to re-write it with ESM, but it just spat out:

Malformed svelte.config.js
SyntaxError: Unexpected strict mode reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18)
    at async link (internal/modules/esm/module_job.js:47:21)

Also no my global.css isn't relative, I have it set to /global.css

[babichjacob]

I did try to re-write it with ESM, but it just spat out:

Malformed svelte.config.js
SyntaxError: Unexpected strict mode reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18)
    at async link (internal/modules/esm/module_job.js:47:21)

Also no my global.css isn't relative, I have it set to /global.css

Can you please share what your attempted ESM conversion looks like? It's almost impossible for anybody to know what the issue is if we can't see that file.

(By the way, we shouldn't really even be having a support session in the GitHub issues -- probably the Discord server instead).

[TheBlueOompaLoompa]

I'm on the svelte discord server
Me: Blue Oompa Loompa#8675

[pikeas]

I did try to re-write it with ESM, but it just spat out:

Malformed svelte.config.js
SyntaxError: Unexpected strict mode reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18)
    at async link (internal/modules/esm/module_job.js:47:21)

Also no my global.css isn't relative, I have it set to /global.css

Can you please share what your attempted ESM conversion looks like? It's almost impossible for anybody to know what the issue is if we can't see that file.

(By the way, we shouldn't really even be having a support session in the GitHub issues -- probably the Discord server instead).

Just bit by this myself. I had const static in the file, and static is a reserved word. Replace all reserved words in the file and hopefully everything will work.

Is there a reason for adapter-static to exist as a separate package, vs encouraging users to roll their own? For example:

/** @type {import('@sveltejs/kit').Adapter} */
const staticAdapter = {
    name: "local/adapter-static",

    async adapt(utils) {
        utils.copy_static_files("build")
        utils.copy_client_files("build")

        await utils.prerender({
            all: true,
            dest: "build",
            fallback: null,
        })
    },
}

[Rich-Harris]

@TheBlueOompaLoompa static is a reserved word. just do import adapter from '@sveltejs/adapter-static'

edit — i see @pikeas already replied along those lines