Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Alternative to loading svelte.config.js ? #6

Closed
nolanlawson opened this issue Jun 11, 2020 · 12 comments
Closed

Alternative to loading svelte.config.js ? #6

nolanlawson opened this issue Jun 11, 2020 · 12 comments
Labels
invalid This doesn't seem right question Further information is requested wontfix This will not be worked on

Comments

@nolanlawson
Copy link

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
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link

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
Copy link
Author

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

@benmccann
Copy link
Collaborator

benmccann commented Dec 7, 2020

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

More details on that here: #25

@MihailProcudin
Copy link

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

have you tried this adding to you babel config file?

@wallw-teal
Copy link

@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
Copy link

@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
Copy link
Collaborator

@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
Copy link
Collaborator

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
Copy link
Collaborator

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

@sebastianrothe sebastianrothe added invalid This doesn't seem right question Further information is requested wontfix This will not be worked on labels Sep 15, 2021
@nolanlawson
Copy link
Author

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

Thanks a bunch!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
invalid This doesn't seem right question Further information is requested wontfix This will not be worked on
Projects
None yet
Development

No branches or pull requests

7 participants