Project loads blank screen (webpackHotUpdatepublisher)

[daniimd]

I updated my vue 2 project to vue 3 but when running the npm run serve command the project is loaded blank, with no error in the terminal, but in the web console the error is displayed: Uncaught TypeError: Cannot set properties of undefined (setting 'webpackHotUpdatepublisher')

package.json:

  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.7.2",
    "@fortawesome/fontawesome-svg-core": "^6.7.2",
    "@fortawesome/free-brands-svg-icons": "^6.7.2",
    "@fortawesome/free-regular-svg-icons": "^6.7.2",
    "@fortawesome/free-solid-svg-icons": "^6.7.2",
    "@fortawesome/vue-fontawesome": "^3.0.8",
    "@mdi/font": "^7.4.47",
    "@types/chai": "^5.0.1",
    "@types/mocha": "^10.0.10",
    "@types/socket.io-client": "^3.0.0",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-e2e-cypress": "^5.0.8",
    "@vue/cli-plugin-router": "^5.0.8",
    "@vue/cli-plugin-typescript": "^5.0.8",
    "@vue/cli-plugin-unit-mocha": "^5.0.8",
    "@vue/cli-plugin-vuex": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/compat": "^3.5.13",
    "@vue/compiler-sfc": "^3.5.13",
    "@vue/test-utils": "^2.4.6",
    "axios": "^1.7.9",
    "chai": "^5.1.2",
    "core-js": "^3.40.0",
    "dotenv-webpack": "^8.1.0",
    "js-sha256": "^0.11.0",
    "rxjs": "^7.8.1",
    "sass": "^1.83.4",
    "sass-loader": "^16.0.4",
    "socket.io-client": "^4.8.1",
    "typescript": "^5.7.3",
    "vue": "^3.5.13",
    "vue-loader": "^17.4.2",
    "vue-router": "^4.5.0",
    "vuetify": "^3.7.7",
    "vuex": "^4.1.0",
    "webpack": "^5.97.1",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.0"
  }

vue.config.js:

module.exports = {
  transpileDependencies: [
    'vuetify'
  ],
  configureWebpack: config => {
    config.output.globalObject = 'this'
  },
  devServer: {
    hot: true,
  },
}

router:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'Login',
    component: () => import( '../views/Login.vue'),
  },
];


const router = createRouter({
  history: createWebHistory(process.env.VUE_APP_API_ENDPOINT),
  routes,
});

export default router;

error screen:

Can anyone help me please?

[daniimd]

up

[alexander-akait]

Please open an issue in @vue/cli-service, we can't fix it here, especial without reproducible example