ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined

Question

I am trying to deploy my Vue app to Vercel but encounter an error when I do. I do not think that the error is caused by Vercel per se, but something in the prod build causes a problem and I can't find what or why.

App is SSR enabled on Vite JS (Vue 3), using this boilerplate: https://github.com/frandiox/vitesse-ssr-template

After build and deployment, opening the / URL shows this error:

ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined
    at Store.install (/var/task/node_modules/vuex/dist/vuex.cjs.js:911:50)
    at Object.use (/var/task/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:3031:28)
    at /var/task/api/renderer/main.js:2694:7
    at /var/task/api/renderer/main.js:2098:44
    at module.exports (/var/task/api/index.js:16:28)
    at Server.<anonymous> (/var/task/___vc_helpers.js:813:19)
    at Server.emit (events.js:376:20)
    at parserOnIncoming (_http_server.js:896:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:126:17)

Also, putting this in my main.ts file (trying to avoid problem), doesn't change anything:

app.config.devtools = false;
app.config.debug = false;
app.config.silent = true; 

Content of my package.json that is used in the serverless deploy, in cas it's useful:

{
  "private": true,
  "dependencies": {
    "node-fetch": "*",
    "@vueuse/core": "^4.9.1",
    "@vueuse/head": "^0.5.1",
    "nprogress": "^0.2.0",
    "vue": "^3.0.11",
    "@vue/server-renderer": "^3.0.11",
    "vue-i18n": "^9.1.6",
    "vue-router": "^4.0.6",
    "axios": "^0.21.1",
    "@headlessui/vue": "^1.2.0",
    "vuex": "^4.0.1"
  }
}

Any idea of what I should look for?

Answer 1

Found it, seems like Vuex sets DevTools to true by default, just had to set it to false:

const store = createStore({
  devtools: false,
})

Answer 2

add the following options in webpack plugin works for me

plugins: [
    new webpack.DefinePlugin({
        __VUE_PROD_DEVTOOLS__: JSON.stringify(false)
    })
]