adapter-static fails with ESM config #1311

janosh · 2021-05-03T05:43:49Z

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?

The text was updated successfully, but these errors were encountered:

Rich-Harris · 2021-05-03T19:00:21Z

#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 · 2021-05-03T19:24:50Z

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 · 2021-05-03T22:00:42Z

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

janosh · 2021-05-04T06:53:13Z

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 · 2021-05-04T17:14:03Z

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 · 2021-05-04T17:18:08Z

@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 · 2021-05-04T17:19:00Z

Yes I did

Rich-Harris · 2021-05-04T18:34:07Z

@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 · 2021-05-04T18:46:04Z

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 · 2021-05-04T18:58:25Z

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 · 2021-05-04T19:44:10Z

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 · 2021-05-04T19:46:30Z

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).

pikeas · 2021-05-04T19:52:19Z

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 · 2021-05-04T20:29:35Z

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

edit — i see @pikeas already replied along those lines

Rich-Harris · 2021-05-04T20:31:01Z

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

yes, so users don't have to type all that. not sure i understand the question. why is anything a package?!

Rich-Harris · 2021-05-04T20:32:27Z

going to close this issue as it's descended into tech support, and this isn't really the venue — if someone is able to reproduce the global.css thing in a fresh issue with a repro, that would be great — thanks

janosh · 2021-05-05T09:02:15Z

@janosh sounds like you must have a relative somewhere? It should be an absolute href.

Oops, that was it! 🤦 Odd though that the relative link wasn't a problem under Sapper.

Sorry for the noise here. All good for closing.

pikeas · 2021-05-05T17:10:58Z

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

yes, so users don't have to type all that. not sure i understand the question. why is anything a package?!

Every additional dependency has a maintenance burden. Because the static adapter is so simple - one 5 line function wrapped in an object - it could be described in docs and doesn't need to be its own package.

janosh · 2021-05-05T17:30:07Z

@pikeas that sounds like a bad idea. Asking users to copy paste code makes it impossible to update afterwards.

babichjacob · 2021-05-05T20:24:27Z

I am currently also experiencing this issue. Is there something I am overlooking?
...

@austinbakker This isn't relevant to this issue. Please see #622, #612, and https://gist.github.com/acoyfellow/2779fb121fac0f32c7419e8dfede772d

davidmgrana · 2021-05-11T18:20:58Z

I'm still having this issue:

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
No "exports" main defined in /Users/dgrana/Workspace/santo-app/node_modules/@sveltejs/adapter-netlify/package.json

Any ideas? i honestly don't know what to try

This is my svelte.config.cjs file:

const netlify = require('@sveltejs/adapter-netlify');
const pkg = require('./package.json');

/** @type {import('@sveltejs/kit').Config} */
module.exports = {
	preprocess: [
		sveltePreprocess({
			defaults: {
				style: "postcss",
			},
			postcss: true
		}),
	],
	kit: {
		adapter: netlify(),
		target: '#svelte'
	}
};

janosh · 2021-05-11T18:25:36Z

@davidmgrana I suggest just doing what the error says, i.e. mv svelte.config.cjs svelte.config.js and then convert your imports and exports to ESM.

This comment has been minimized.

Sign in to view

Rich-Harris closed this as completed May 4, 2021

This comment has been minimized.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

adapter-static fails with ESM config #1311

adapter-static fails with ESM config #1311

janosh commented May 3, 2021

Rich-Harris commented May 3, 2021

janosh commented May 3, 2021

Rich-Harris commented May 3, 2021

janosh commented May 4, 2021

TheBlueOompaLoompa commented May 4, 2021

janosh commented May 4, 2021 •

edited

Loading

TheBlueOompaLoompa commented May 4, 2021

Rich-Harris commented May 4, 2021

TheBlueOompaLoompa commented May 4, 2021 •

edited

Loading

Conduitry commented May 4, 2021

TheBlueOompaLoompa commented May 4, 2021

babichjacob commented May 4, 2021

This comment has been minimized.

pikeas commented May 4, 2021

Rich-Harris commented May 4, 2021 •

edited

Loading

Rich-Harris commented May 4, 2021

Rich-Harris commented May 4, 2021

janosh commented May 5, 2021

pikeas commented May 5, 2021

janosh commented May 5, 2021

This comment has been minimized.

babichjacob commented May 5, 2021

davidmgrana commented May 11, 2021 •

edited

Loading

janosh commented May 11, 2021

adapter-static fails with ESM config #1311

adapter-static fails with ESM config #1311

Comments

janosh commented May 3, 2021

Rich-Harris commented May 3, 2021

janosh commented May 3, 2021

Rich-Harris commented May 3, 2021

janosh commented May 4, 2021

TheBlueOompaLoompa commented May 4, 2021

janosh commented May 4, 2021 • edited Loading

TheBlueOompaLoompa commented May 4, 2021

Rich-Harris commented May 4, 2021

TheBlueOompaLoompa commented May 4, 2021 • edited Loading

Conduitry commented May 4, 2021

TheBlueOompaLoompa commented May 4, 2021

babichjacob commented May 4, 2021

This comment has been minimized.

pikeas commented May 4, 2021

Rich-Harris commented May 4, 2021 • edited Loading

Rich-Harris commented May 4, 2021

Rich-Harris commented May 4, 2021

janosh commented May 5, 2021

pikeas commented May 5, 2021

janosh commented May 5, 2021

This comment has been minimized.

babichjacob commented May 5, 2021

davidmgrana commented May 11, 2021 • edited Loading

janosh commented May 11, 2021

janosh commented May 4, 2021 •

edited

Loading

TheBlueOompaLoompa commented May 4, 2021 •

edited

Loading

Rich-Harris commented May 4, 2021 •

edited

Loading

davidmgrana commented May 11, 2021 •

edited

Loading