Can't resolve 'vue/server-renderer'

[deepak-sisodiya]

Affected Projects
Vue.JS

"@appbaseio/reactivesearch-vue": "3.1.0-alpha.1",

Screenshots

Desktop (please complete the following information):

• Browser [e.g. chrome, safari]

while migration from vue 2 to vue 3, I am getting this error. How to resolve it

[SavvyShah]

Can you try version 3.1.0-alpha.2. Also I'm assuming you are using NuxtJS. And FWIW, can you specify the folder structure that you have for your app?

[SavvyShah]

Can you also specify the version of NuxtJS or VueJS for which this is happening?

[deepak-sisodiya]

@SavvyShah

I will try for 3.1.0-alpha.2 version also.

I am not using NuxtJS and just using vue.js 3

Here is my package file

{
  "name": "admin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
   
  },
  "dependencies": {
    "@bugsnag/browser-performance": "0.2.0",
    "@bugsnag/js": "^7.20.2",
    "@bugsnag/plugin-vue": "^7.19.0",
    "@flatfile/sdk": "^2.0.1-rc.1",
    "@goldcast/api": "^1.0.21",
    "@goldcast/client": "^1.0.4",
    "@goldcast/feature-flags": "^1.1.1",
    "@goldcast/formio-goldcast-app": "^1.0.10",
    "@goldcast/logger": "^0.0.8",
    "@goldcast/uicomponents-branding": "1.2.6",
    "@mailupinc/bee-plugin": "^1.4.0-beta.3",
    "@sanity/block-content-to-html": "^2.0.0",
    "@sanity/client": "^6.1.3",
    "@segment/analytics-next": "^1.53.1",
    "@thoughtspot/visual-embed-sdk": "^1.20.0",
    "@tiptap/core": "^2.0.0-beta.220",
    "@tiptap/extension-character-count": "^2.0.3",
    "@tiptap/extension-link": "^2.0.0-beta.220",
    "@tiptap/pm": "^2.0.0-beta.220",
    "@tiptap/starter-kit": "^2.0.0-beta.220",
    "@types/testing-library__jest-dom": "^5.14.6",
    "@vue/compat": "^3.2.37",
    "@vue/compiler-sfc": "^3.2.37",
    "aws-amplify": "^5.3.5",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "filestack-js": "^3.23.1",
    "fuzzy-search": "^3.2.1",
    "grapesjs": "^0.18.4",
    "hls.js": "^1.1.5",
    "idb-keyval": "^6.1.0",
    "lodash.clonedeep": "^4.5.0",
    "lodash.debounce": "^4.0.8",
    "lodash.isequal": "^4.5.0",
    "lodash.throttle": "^4.0.8",
    "logrocket": "^4.0.3",
    "moment": "^2.27.0",
    "moment-timezone": "^0.5.31",
    "process": "^0.11.10",
    "serve": "^12.0.1",
    "vue": "^3.2.37"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  },
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/eslint-parser": "^7.21.8",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
    "@babel/preset-typescript": "7.22.5",
    "@goldcast/frontend-scripts": "file:../../scripts",
    "@storybook/addon-essentials": "^7.0.26",
    "@storybook/addon-interactions": "^7.0.26",
    "@storybook/addon-links": "^7.0.26",
    "@storybook/blocks": "^7.0.26",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@storybook/vue3": "^7.4.0",
    "@storybook/vue3-vite": "^7.4.0",
    "@tailwindcss/container-queries": "^0.1.0",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.7",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/vue": "5.9.0",
    "@tiptap/vue-3": "^2.1.7",
    "@types/jest": "^29.4.0",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vitejs/plugin-vue": "^2.2.0",
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.8",
    "@vue/cli-plugin-typescript": "~5.0.8",
    "@vue/cli-plugin-unit-jest": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "1.3.5",
    "@vue/vue2-jest": "^29.2.3",
    "babel-jest": "^29.4.1",
    "babel-loader": "^8.1.0",
    "babel-preset-vue": "^2.0.2",
    "chalk": "^4.1.2",
    "concurrently": "^8.2.0",
    "dotenv": "^10.0.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-jest": "^27.2.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^8.0.3",
    "express": "^4.17.1",
    "fs": "^0.0.1-security",
    "html-webpack-plugin": "^4.5.2",
    "husky": "^7.0.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.4.1",
    "lint-staged": "^11.1.2",
    "morgan": "^1.10.0",
    "postcss": "^8.4.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "~1.32.0",
    "sass-loader": "^8.0.0",
    "storybook": "^7.0.26",
    "tailwindcss": "^3.2.4",
    "ts-jest": "^29.1.0",
    "typescript": "~4.5.5",
    "vue-loader": "^16.0.0",
    "vue-router": "^4.0.0",
    "vue-template-babel-compiler": "^2.0.0",
    "vuedraggable": "^4.1.0",
    "vuetify": "^3.3.14",
    "vuex": "^4.0.2"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "lint-staged": {
    "*.{js,vue}": []
  }
}

[deepak-sisodiya]

@SavvyShah we have a monorepo structure, using pnpm and pnpm workspace

[deepak-sisodiya]

@SavvyShah getting same error on 3.1.0-alpha.2

Can't resolve 'vue/server-renderer'

[SavvyShah]

I suspect something related to the monorepo structure. Vuejs is not resolved to be version 3, it's still using version 2 and hence it doesn't find vue/server-renderer.
Can you specify the folder structure with relevant info about each package.json file at the folder level? eg. VueJS version mentioned. Which other packages use VueJS in the monorepo? Try updating them to v3 just for testing.

[SavvyShah]

Also it would help if you paste the output of pnpm why vue

[deepak-sisodiya]

@SavvyShah Project Structure

monorepo

• apps
  admin-app - "vue": "^3.2.37" "@vue/compat": "^3.2.37",
  builder - nuxt
  content-studio - react
  event-app - vuejs "vue": "^2.7.14",
  pages: nuxt
  person-manager - react
  registration-app -
  server. - "vue": "^2.7.14",
  "vue-server-renderer": "^2.7.14"
  frontend - "vue": "^2.7.14"
  sanity-dashboard - react

[deepak-sisodiya]

I am using - @vue/compat , is that might be the reason?

[SavvyShah]

You're correct. It's one of it's known limitations.

[deepak-sisodiya]

@SavvyShah You mean once I am done with migration and remove @vue/compat then it would start working? right

[SavvyShah]

Correct.

[deepak-sisodiya]

@SavvyShah Thanks, I will let you know once done with migration.

[SavvyShah]

Additionally, for Reactivesearch library you would need to perform a few changes migrating from vue v2 -> vue v3. You can follow the guide in docs.

[deepak-sisodiya]

@SavvyShah Thanks

Yesterday, I successfully removed 'vue/compact' from my setup, and Reactivesearch is now installed without any errors. My next step is to follow the migration documentation to ensure that my code functions properly.

[deepak-sisodiya]

@SavvyShah thanks for help, Now I am getting another issue while migration, Please help
#2247