Problems with Vite + SolidJS: jsxImportSource and import.meta.env

[tslocke]

My project uses Vite and SolidJS, and I'm having trouble running quokka.

tsx files

First up, my tsconfig has "jsxImportSource": "solid-js" which gives the error:

Option 'JSXImportSource' cannot be specified when option 'jsx' is 'react'

In fact the jsx option in my tsconfig is set to 'preserve'

If I use a Quokka config to set jsx compiler option to 'preserve' I then get unexpected token < from tsx files.

import.meta

If I avoid importing any tsx, I hit the second problem which is that quokka trips up on import.meta.env, which is used by Vite to provide environment vars to the app.

I guess both of these imply that Vite transformations are not running. Is it supported? Any workaround for import.meta?

Thanks

[smcenlly]

Quokka supports compiling TypeScript files in either TypeScript or Babel (not Vite).

Quokka using TypeScript (the default), doesn't currently support any options for jsx other than react. I've added a feature request to add support.

---

Having said that, you can configure Quokka to support your scenario by configuring Quokka to use Babel instead of TypeScript and with some babel configuration.

It also looks like you can configure Babel to emulate import.meta.env.

With Babel, you should be able to configure everything to work for your scenario.

[tslocke]

Thanks.

The main reason I was happy that you guys added vitest support to Wallaby was that I could drop the Babel deps and not need to configure everything twice. This was quite a pain due to little differences in the config. e.g. at one point the ||= operator was working in the browser but not in tests. I know all these things are solvable but it's such a time sink.

So I happily got rid of Babel and only just found out I lost Quokka in the process : (

Will you consider adding vite support?

The jsx support is not such a big deal - I normally use Quokka to mess about with functions in other layers. I just have to be more careful to keep my jsx to where it needs to be. I can probably also work around the import.meta problem by detecting if the code is running in vite, and avoiding import.meta if not.

[smcenlly]

Will you consider adding vite support?

Adding vite support to Quokka would require us to build something similar to vitest to support vite transformations and then we'd need to run them with a specialized runtime. This is something that is definitely not trivial. If you'd like to create an issue with a feature request and we get enough interest, we'd be happy to consider it at that point in time.

---

I understand wanting to have a single configuration and how subtle differences can cause problems but I do think you should be able to get things working nicely with babel. If you don't want to install babel and babel dependencies in your project, you can install them in your ~/.quokka folder as global Quokka dependencies. You can also update your global Quokka configuration to always configure babel to run in a vite project compatible way. If you do this, your project should remain "clean" and Quokka should continue to work. At this point, the only potential downside is sharp edges because of any differences with babel and vite transpilation.