Improved Docs for newbies to Vite and mjs

[fastify]

Improved Docs for newbies to Vite and mjs

[jonsherrard]

OK I've got it working:

Issue 1. It's worth putting "save this server file as app.mjs" at the beginning, I saved it as server.js and it didn't work.

Issue 2. Only .jsx files are supported for views - I know it's a matter for debate but lots of people save their JSX view files as .js files, so it's worth highlighting that.

Issue 3. The example view doesn't have import React from 'react' - If I was writing from scratch I'd remember that, but as I copied from your docs I didn't notice, and that caused another error.

[jonsherrard]

One more thing to document. Where do the styles come from? How do I get started changing them?

[galvez]

Awesome — thanks for the input @jonsherrard — I'll update the docs this weekend.

[jonsherrard]

No worries!

Also if you start from scratch and try to use some interaction code in your index file:

import React, { useState } from "react";

export default function Index() {
  const [counter, setCounter] = useState(0);
  return (
    <div>
      Value: {counter}
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
      <h1>Hello World this is nice and very fast?</h1>
    </div>
  );
}

export const path = "/";

React isn't working at all.

I think it's something to do with this bug/issue: vitejs/vite#5608

[galvez]

React isn't working at all.

Can you share your repo? I have React apps running fastify-vite-react now that don't have this issue, weird.

[jonsherrard]

@galvez I could well be doing something silly: repro here: https://github.com/devular/fastify-vite-test

[galvez]

This was a breaking change I failed to properly document, my apologies. You need to explicitly import React now.

diff --git a/entry/client.jsx b/entry/client.jsx
index fc6f90a..e125ad1 100644
--- a/entry/client.jsx
+++ b/entry/client.jsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import ReactDOM from 'react-dom'
 import { ContextProvider, hydrate } from 'fastify-vite-react/client.mjs'
 import { createApp } from '@app/client.jsx'