Comments (7)
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.
from fastify-vite.
One more thing to document. Where do the styles come from? How do I get started changing them?
from fastify-vite.
Awesome — thanks for the input @jonsherrard — I'll update the docs this weekend.
from fastify-vite.
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
from fastify-vite.
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.
from fastify-vite.
@galvez I could well be doing something silly: repro here: https://github.com/devular/fastify-vite-test
from fastify-vite.
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'
from fastify-vite.
Related Issues (20)
- How to configure multi-page entry HOT 8
- Issues running with fastify-compress HOT 4
- Serve static assets from ssr builds in production mode HOT 2
- TypeError [ERR_INVALID_ARG_TYPE]: The "paths[0]" argument must be of type string
- Trace: The CJS build of Vite's Node API is deprecated
- Conflicting websockets between vite and `@fastify/websocket` causing infinite redirects HOT 1
- [react][windows] React Starter Template does not start on Windows HOT 4
- How to use Vue plugins like instance.use(...) HOT 4
- NPM install fails with 'edgesout' error HOT 3
- [SPA] allowing passing additional context to the render function HOT 3
- mts file extension is not supported for vite.config HOT 3
- @fastify/vue Smart Import doesn't resolve path in windows HOT 6
- How to config fastify-vite in a Electron Vite project HOT 1
- Route path resolution of starters/react-base not working in Windows HOT 1
- Unable to build project and missing files HOT 1
- Unable to specify any base route other than '/' HOT 1
- Should not need to resolveViteConfig in production mode HOT 1
- Impossibel to build if you use anything other than Fastify vite. HOT 2
- Fastify server fail to start in production mode due to: AssertionError [ERR_ASSERTION]: The first character of a path should be `/` or `*`
- Vue SSR performance inconsistency HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fastify-vite.