Alternative to loading svelte.config.js ?

[nolanlawson]

Hi, thanks for writing svelte-jester, it seems like the best way to use Jest with Svelte! 🙂

I noticed that, if a project's package.json declares "type": "module" (new in Node 14), then when running jest it throws an error because it expects an ES module, not a CommonJS module. (See error below.)

I know svelte.config.js is a convention borrowed from svelte-preprocessor, but I wonder if there could be a way to pass the options directly into svelte-jester? This would eliminate the need to load a separate file. Alternatively, it seems that allowing a filename like svelte.config.cjs would also work.

(Interestingly, changing svelte.config.js to use ES module format rather than CommonJS format throws the same error.)

Uncaught Error: Must use import to load ES Module: ~/my-project/svelte.config.js
require() of ES modules is not supported.
require() of ~/my-project/svelte.config.js from ~/my-project/node_modules/cosmiconfig/dist/loaders.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename svelte.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from ~/my-project/package.json.

(FWIW, in case someone is googling this error and happens upon this GitHub issue, I worked around it by forking svelte-jester and avoiding loading the separate file.)

[mihar-22]

Hey @nolanlawson I haven't dug in this issue completely, but to shed some light on why I made the library this way is because:

Jest does not support async transformations at the moment, svelte.preprocess is async, so the only way around it is running a child process synchronously which then executes async code. Now this is why I chose to use svelte.config.js. You can't pass a function from one process to another (I'd love to know if it's actually possible, don't think so), and as you know svelte-preprocess takes in a complex configuration containing functions and what not. To load it in the child process it needs to exist externally in a file.

So I decided for the time being while we wait for Jest to support async transforms (there is a PR being worked on) to use svelte.config.js because of the explanation above but also as you said it's a convention used by svelte-preprocess and also svelte-vscode so most people should be familiar with it by now and have it in their projects.

I understand you want to pass the configuration directly but we can't right now, as soon as we can I'll make a PR for it :)

[mihar-22]

In regards to the ES module error, do you have any proposed solution on how it could exist in a seperate file for the time being. Does simply supporting both .js and .cjs files solve the issue?

[rbenzazon]

I agree that this svelte config file is needed to provide options but I found no documentation on it nowhere. The only config I know for svelte is the rollup one, and I don't know how it relate to what's expected in svelte.config. I just jumped on the bandwagon of svelte testing and I struggle so much to find resources and correct configuration.

[nolanlawson]

@mihar-22 I didn't test it, but yes, it looks like supporting svelte.config.cjs would also do the trick.

[benmccann]

while we wait for Jest to support async transforms (there is a PR being worked on)

More details on that here: #25

[MihailProcudin]

		plugins: [
			["@babel/plugin-transform-modules-commonjs", { "allowTopLevelThis": true }],
			]

have you tried this adding to you babel config file?

[wallw-teal]

@MikeProcudin I tried adding that to one of our new projects (which is having the same issue) and added that project as a dev dependency, and still get the same error.

[MihailProcudin]

@wallw-bits , hey, I've changed svelte-jester to jest-transform-svelte and it worked for me.
Hopefully, it will be the case with ur stuff.

[sebastianrothe]

@wallw-bits , hey, I've changed svelte-jester to jest-transform-svelte and it worked for me.
Hopefully, it will be the case with ur stuff.

jest-transform-svelte doesn't support all the options from svelte-jester. But it might work, depending on your setup.

[benmccann]

I know svelte.config.js is a convention borrowed from svelte-preprocessor

It should be noted that this is not just a svelte-preprocessor convention, but rather is the official standard of the Svelte ecosystem. Rich proposed it in sveltejs/svelte#1101 and implemented it in SvelteKit, which is the official way to build Svelte apps

[sebastianrothe]

@nolanlawson Can you please retry with the latest version and jest 27+? Sveltekit requires ESM, so this should not be the problem anymore.

[nolanlawson]

Looks like I can set preprocess: './svelte.config.cjs'. This works for me: nolanlawson/emoji-picker-element#260

Thanks a bunch!