nuxt3 packages mismatch at build stage - firebase

Question

I know Nuxt3 is in release candidate, but it has been announced as almost stable so I am trying to deploy my SSR app on firebase hosting, using a cloud function.
To do so, and because I am new to the Nuxt and the Firebase environment, I am following this tutorial: https://medium.com/#sirofjelly/deploying-a-nuxt-ssr-server-side-rendering-app-to-google-firebase-5d90117167db.
Here is my package.json:
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"firebase:start:import_export": "firebase emulators:start --import=./test/ --export-on-exit=./exported_datas/",
"firebase:export": "firebase emulators:export ./test/",
"deploy": "firebase deploy --only functions && firebase deploy --only hosting",
"clean": "rm -rf .nuxt .output dist node_modules *.log",
"clean_all": "npm run clean && rm -rf functions/node_modules functions/nuxt"
},
"devDependencies": {
"#intlify/unplugin-vue-i18n": "^0.5.0",
"#typescript-eslint/eslint-plugin": "^5.33.1",
"#typescript-eslint/parser": "^5.33.1",
"autoprefixer": "^10.4.8",
"eslint": "^8.22.0",
"eslint-plugin-vue": "^9.3.0",
"nuxt": "^3.0.0-rc.11",
"postcss": "^8.4.16",
"vue-i18n": "^9.2.2"
},
"dependencies": {
"#headlessui/vue": "^1.6.7",
"#heroicons/vue": "^2.0.10",
"#nuxtjs/i18n": "^7.3.0",
"#sendgrid/mail": "^7.7.0",
"bulma": "^0.9.4",
"bulma-carousel": "^4.0.24",
"firebase": "^9.9.3",
"firebase-functions": "^3.23.0",
"firebase-tools": "^11.8.0",
"nuxt-start": "^2.15.8",
"uuid": "^8.3.2"
}
}
Here is my firebase.json file:
{
"database": {
"rules": "./firebase_rules/database.rules.json"
},
"hosting": {
"predeploy": [
"rm -rf public/* && mkdir -p public/_nuxt && cp -r .nuxt/dist/client/ public/_nuxt && cp -a static/. public/"
],
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"function": "ssrapp"
}
]
},
"storage": {
"rules": "./firebase_rules/storage.rules"
},
"functions": {
"runtime": "nodejs16",
"source": "functions",
"predeploy": [
"npm run build && rm -rf functions/nuxt && cp -r .nuxt/ functions/nuxt/ && cp nuxt.config.ts functions/"
]
},
"emulators": {
"hosting": {
"port": 3001
},
"ui": {
"enabled": true
},
"database": {
"port": 9000
},
"storage": {
"port": 9199
},
"functions": {
"port": 5001,
"host": "localhost"
},
"auth": {
"port": 9099
}
}
}
The observed behavior:
When I run the build command npm run build, everything goes well, the build works fine.
But when the predeploy command launch the same build command (see firebase.json in the functions config), the build raise a specific error:
Error: Failed to load function definition from source: Failed to generate manifest from function source: Error:
Vue packages version mismatch:
- vue#3.2.41
- vue-server-renderer#2.7.13
No solution from https://github.com/nuxt/nuxt.js/issues/6823 worked on my problem
I tried a lot of things with packages but without success.
Have anybody an idea to solve the problem ? Is this a Nuxt3-rc12 issue ?
Thanks for help

Answer 1

The solution was presented at: https://nitro.unjs.io/deploy/providers/firebase