Comments (10)
Hey @SuslegStyle — happy to help you debug this — would it be at all possible to add me to your repository? As one of fastify-vite's first users, your feedback is extremely valuable to me and I'd love to make myself more directly helpful.
But I see one obvious issue: you either use routes.js
or manually define routes through view exports. For now I'd say change your manual fastify.vite.get
call with this set of exports from your route:
<script>
export const path = '/'
export const preHandler = logMetricsStatic('homepage', 'GET')
</script>
And work the layout mechanics directly into base.vue
.
from fastify-vite.
Thank you for your reply.
You are very helpfull. I did not know that it is possible to define preHandler in script section.
But, in my case it is:
const logMetricsBuilder = fastify.diContainer.resolve('logMetrics');
const logMetricsStatic = logMetricsBuilder.build('static');
I am wondering if we can get fastify instance in scripts section as well. Due to security reasons, I'd like to have guarantees that preHandler code will be executed only on server side and even will not be shared to clients.
I'm sorry, I can't add you to our main project, but I can prepare an example app.
from fastify-vite.
Thank you, for the release 2.2.0
!
Also I followed to your advise and moved all fastify-defined hooks to the Vue layer.
I updated content in main files according to latest changes in the release.
Now, during the build, I've got the error
Error: failed to load module for ssr: ***\@app\entry\server.js
at instantiateModule (***\node_modules\vite\dist\node\chunks\dep-85dbaaa7.js:66477:15)
I tried to delete my entry/server.js file, but it didn't help.
I tried to set blueprint: false
. It was no luck as well.
Finally, I copied entry/server.js file from 'fastify-vite-vue/base/entry/server.js`. No results.
The only difference with example apps as I can see is determing root property. In your example it is
const root = import.meta.url
but mine is just
await fastify.register(fastifyVite, {
api: true,
root: path.resolve(__dirname),
blueprint: false,
renderer
});
because, my package.json file does not set "type": "module".
So, my question is
How to set/override path for "@app" ? Should I add something to my vite.config.js ?
from fastify-vite.
Hey @SuslegStyle blueprint: false
is not working, now that I realize, it was left in a branch 🤦 I'll release a patch later tonight and follow up on this thread.
from fastify-vite.
Hey @galvez . Thank you for so fast reply.
I've already updated to 2.2.1
, but nothing was changed to me. I still get the same error during the build command.
Moreover, I tried to add resolve section to my vite.config.js, but it did not help.
resolve: {
alias: [
{
find: '@app',
replacement: resolve(__dirname)
}
]
},
Let me recap my case.
I have custom files
- entry/client.js
- client.js
- client.vue
- routes.js
Initially I thought the rest files will be automatically loaded.
When I realised that it does not work, I copied additional files and removed internal @app
- entry/server.js
- index.html
The only head.js
does not exist in my repo, because we use useHead
in each Page Component.
from fastify-vite.
Hey @SuslegStyle — I update the docs section about this, I decided to step back on blueprint: false
because it would have required either a bit of code generation in enabling vite.config.js
or splicing the plugins in runtime which turned out to be a cumbersome at first. So to keep it simple, just copy node_modules/<renderer-adapter>/vite.js
as vite.config.js
in your project and manually remove vite-plugin-blueprint
.
from fastify-vite.
Thank you, for the update.
I've just tried to follow to your recommendations, but no luck. The same error continue displaying.
My vite.config.js looks like
import {join, resolve, relative} from 'path';
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
const dev = process.env.NODE_ENV !== 'production';
export default defineConfig({
build: {
assetsDir: 'assets',
minify: !dev,
outDir: 'dist',
reportCompressedSize: false
},
plugins: [vue()],
resolve: {
alias: [
{
find: '@styles',
replacement: join(resolve(__dirname), 'styles')
}
]
},
css: {
preprocessorOptions: {
scss: {
additionalData(content, contentPath) {
const relativePath = relative(__dirname, contentPath);
if (relativePath.startsWith('pages/external/')) {
return `@import "@styles/external"; ${content}`;
}
return `@import "@styles"; ${content}`;
}
}
}
}
});
Then, I updated my Demo app and the issue was reproduced.
Please, take a look at it. Maybe it can help to resolve the issue.
from fastify-vite.
Thank you so much for the reproduction repo — I'll take a look ASAP.
from fastify-vite.
Applying this diff should get it to work:
diff --git a/pages/index.vue b/pages/index.vue
index 700a475..3201356 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@
</template>
<script>
-import {useHydration} from 'fastify-vite-vue/client';
+import {useHydration} from 'fastify-vite-vue/client.mjs';
export const path = '/';
diff --git a/routes.js b/routes.js
index f8baa78..4deab7c 100644
--- a/routes.js
+++ b/routes.js
@@ -1,4 +1,4 @@
import { loadRoutes } from 'fastify-vite-vue/app'
-export default loadRoutes(import.meta.globEager('./pages/*.vue'))
+export default () => loadRoutes(import.meta.globEager('./pages/*.vue'))
diff --git a/server.js b/server.js
index bac3437..8f2458e 100644
--- a/server.js
+++ b/server.js
@@ -9,7 +9,9 @@ async function main () {
api: true,
root: __dirname,
renderer,
- blueprint: false
+ entry: {
+ server: '/entry/server.js',
+ },
});
fastify.api(({ get }) => ({
- The default value for the
entry.server
option is@app/entry/server.js
— after ejecting and droppingvite-plugin-blueprint
, that value must be overriden. - The export of
routes.js
now needs to be a function. - The
/client
import from renderer adapters now has an explicit.mjs
extension
Sorry for the inconvenience! Will update the docs to cover this properly.
from fastify-vite.
Thank you @galvez . I'm going to apply changes and let know in case of any issues
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.