Route definition duplicate error

[fastify]

Route definition duplicate error

[galvez]

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.

[SuslegStyle]

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.

[SuslegStyle]

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 ?

[galvez]

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.

[SuslegStyle]

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.

[galvez]

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.

[SuslegStyle]

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.

[galvez]

Thank you so much for the reproduction repo — I'll take a look ASAP.

[galvez]

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 dropping vite-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.

[SuslegStyle]

Thank you @galvez . I'm going to apply changes and let know in case of any issues