Attempting to set up with Vite

Question

Attempting to set up with Vite

kristiandupont opened this issue a year ago · comments

I'm trying this out. I like Vite so I would like it to work with that.

These are my configs:

tsconfig.json:

{
  "extends": "@tsconfig/recommended/tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@b9g/crank"
  }
}

vite.config.ts:

import { defineConfig } from 'vite';

export default defineConfig({ plugins: [] });

I have a simple file from the getting started section:

/** @jsxImportSource @b9g/crank */
import {renderer} from "@b9g/crank/dom";

renderer.render(
  <p>This paragraph element is transpiled with the automatic transform.</p>,
  document.body,
);

But when I load my page, I get the following error in the console:

Uncaught SyntaxError: ambiguous indirect export: jsxDEV

It looks like the module it's importing from only exports a jsx item, but no jsxDEV. I am not sure if this is related to Vite (/ESBuild)?

Kristian Dupont · Answer 1 · Mon Jul 24 2023 04:33:28 GMT+0800 (China Standard Time)

Update: It seems to work if I add this to the vite config: esbuild: { jsxDev: false} . I am not sure if it means that I lose some debuggability or something? I will close this for now.

Darryl Cousins · Answer 2 · Mon Jul 24 2023 14:24:09 GMT+0800 (China Standard Time)

Hi Kristian,

I'm not using typescript in my applications, but I have crankjs working with vite with only the following config being necessary:

vite.config.js

export default {
  esbuild: {
    jsxFactory: 'createElement',
   jsxFragment: 'Fragment'
  }
}

Happy to discuss.

Ngā mihi, regards,
Darryl

Darryl Cousins · Answer 3 · Mon Jul 24 2023 14:42:48 GMT+0800 (China Standard Time)

Hi Kristian,

Maybe a bit more infomation would be helpful.

vite.config.js

export default {
  esbuild: {
    jsxFactory: 'createElement',
   jsxFragment: 'Fragment'
  }
};

index.html

<html>
...

<div id="app"></div>
<script type="module" src="/index.jsx"></script>

...
</html

index.jsx

import { createElement, Fragment } from "@b9g/crank";
import { renderer } from "@b9g/crank/dom";

document.addEventListener("DOMContentLoaded", async () => {
  await renderer.render(
    <div>Hello world</div>,  // or a crank component
    document.querySelector("#app")
  );
});

Hope that helps, should just work :-)
Darryl

Kristian Dupont · Answer 4 · Tue Jul 25 2023 15:31:00 GMT+0800 (China Standard Time)

Thanks Darryl, I got it working with what I wrote above so I am sticking with that for now. :-)
Excited about trying this out. It seems that traction is still slow and I do feel that there is a real chance we all discover some serious downsides to the approach but it feels like a principle that needs to be tried out properly.

Darryl Cousins · Answer 5 · Tue Jul 25 2023 15:48:57 GMT+0800 (China Standard Time)

Cheers. Go well.

Sincere regards,
Ddarryl

Brian Kim · Answer 6 · Wed Jul 26 2023 02:36:57 GMT+0800 (China Standard Time)

Sorry about the tardy response. Thank you @darrylcousins for stepping in!

I also apologize about the traction. @kristiandupont let me know your thoughts. Thank you for checking out Crank.js

Kristian Dupont · Answer 7 · Wed Jul 26 2023 03:31:53 GMT+0800 (China Standard Time)

No worries, I maintain open source projects myself and I am not always available.

I am experimenting with it and it's definitely hard to un-React my brain but it feels very powerful and "pure" for the lack of a better word. The one thing that is hard for me to imagine is a SSR/client transition as it feels like it would require arbitrary jumps. But I can see that you are discussing that heavily already :-)