Migration from Vue2 to Vue3

Question

I am trying to migrate Vue2 to Vue3. For this I uppdated most of the packages to their latest. I deleted some of my packages to make it more summarized but here is my package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production",
    },
    "devDependencies": {
        "@babel/core": "^7.15.0",
        "@babel/runtime": "^7.15.3",
        "@sentry/webpack-plugin": "^1.17.1",
        "axios": "^1.0.0",
        "cross-env": "^7.0.3",
        "css-loader": "^6.2.0",
        "cypress": "^9.6.1",
        "cypress-file-upload": "^5.0.8",
        "eslint": "^8.24.0",
        "eslint-plugin-vue": "^9.6.0",
        "jquery": "^3.5.1",
        "laravel-echo": "^1.9.0",
        "laravel-mix": "^6.0.49",
        "postcss": "^8.4.17",
        "prettier": "^2.6.2",
        "pusher-js": "^7.0.2",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.55.0",
        "sass-loader": "^13.0.2",
        "vue": "^3.2.40",
        "vue-loader": "^17.0.0",
        "vue-template-babel-compiler": "^2.0.0",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.8.0",
        "worker-loader": "^3.0.8",
        "zen-observable": "^0.8.15"
    },
    "dependencies": {
        "@formkit/auto-animate": "^1.0.0-beta.1",
        "@sentry/browser": "^6.11.0",
        "@sentry/integrations": "^6.11.0",
        "@sentry/tracing": "^6.11.0",
        "@stoplight/spectral-cli": "^6.2.1",
        "@vue/compat": "^3.2.40",
        "@vue/compiler-sfc": "^3.2.40",
        "el-table-infinite-scroll": "^3.0.1",
        "element-plus": "^2.2.17",
        "element-ui-el-table-draggable": "^1.2.10",
        "vue-router": "^4.0.13",
        "vuex": "^4.0.2",
    },
    "optionalDependencies": {
        "fsevents": "^1.2.9"
    },
    "engines": {
        "node": "^12.0.0"
    }
}

And here is my webpack.mix.js:

const mix = require('laravel-mix');
const webpack = require('webpack');
const SentryWebpackPlugin = require('@sentry/webpack-plugin');

let plugins = [
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery',
    'window.jQuery': 'jquery',
  }),
  new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en/),
];

  plugins.push(
    new SentryWebpackPlugin({
      authToken: process.env.SENTRY_AUTH_TOKEN,
      org: '',
      project: 'front-end',

      include: './public',
      ignore: ['node_modules', 'webpack.mix.js'],
    }),
  );
mix
  .js('resources/assets/js/app.js', 'public/js')
  .override((webpackConfig) => {
    webpackConfig.module.rules = webpackConfig.module.rules.map(function (rule) {
      if (rule.test == '/\\.vue$/') {
        rule.use[0].loader = 'vue-loader';
      }
      return rule;
    });
  })
  .vue({ version: 3 })
  .sass('resources/assets/sass/app.scss', 'public/css')
  .sass('resources/assets/sass/element.scss', 'public/css')
  .version()
  .options({
    uglify: {
      uglifyOptions: {
        compress: {
          drop_console: true,
        },
      },
    },
    terser: {
      parallel: false,
    },
  })
  .webpackConfig({
    plugins,
    resolve: {
      alias: {
        '@': __dirname + '/resources/assets/js/components',
        '&': __dirname + '/resources/assets/sass',
      },
    },
    devServer: {
      allowedHosts: 'all',
    },
  })

But I am getting an error like this:

app.js:43225 Uncaught TypeError: Cannot read properties of undefined (reading 'use')
    at eval (app.js?e348:51:5)
    at ./resources/assets/js/app.js (app.js:6135:1)
    at __webpack_require__ (app.js:43222:33)
    at app.js:44563:115
    at __webpack_require__.O (app.js:43269:23)
    at app.js:44569:53
    at app.js:44571:12

I am really confused about this error and I have no clue how to solve it. Any help would be appreciated.

You can check yourself the code at the specified location. It's very likely it refers to Vue.use, which doesn't exist in Vue 3. This means that you didn't update some of plugins. You can use vue compat package but it doesn't guaranteed that V2 libs will be workable, so proceed from that you need to upgrade every lib — Estus Flask
– Estus Flask, Commented Oct 7, 2022 at 13:12
I think it is related to laravel-mix but couldnt figure out how — World's famous people
– World's famous people, Commented Oct 10, 2022 at 14:08
I don't see a connection. The code from webpack.mix.js is Node code, it isn't evaluated in a browser and shouldn't be included into app.js. It's a coincidence that use property is used there either. `Any way, only you check what exactly the error refers to. — Estus Flask
– Estus Flask, Commented Oct 10, 2022 at 14:13
I updated all of my packages but getting the same error. Before I update my applicaiton in app.js 'window.Vue = Vue;' this exists but I dont know how to change it with app. Do you want me to share app.js also? — World's famous people
– World's famous people, Commented Oct 10, 2022 at 14:51
Yes, this may help, although it wouldn't be the first thing to check. It's more important why window.Vue is needed — Estus Flask
– Estus Flask, Commented Oct 10, 2022 at 15:00

Anh Tuan Nguyen · Accepted Answer · 2022-10-08 21:55:37Z

0

Vue2 and Vue3 are initiated (or mounted) differently. From the Getting started Page in Vue2:

import Vue from "vue"

Vue.use(<yourPlugin>)

var app = new Vue({
  el: '#app',
  ...
})

In Vue 3

import { createApp } from 'vue'

const app =  createApp({
  ...
})
app.use(<yourPlugin>)
app.mount('#app')

answered Oct 8, 2022 at 21:55

Anh Tuan Nguyen

9793 gold badges13 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

World's famous people Over a year ago

I added that but still getting the same error. Should I add 'rule.use[0].options.compiler = require('@vue/compiler-sfc');' to my webpack.mix.js?

Collectives™ on Stack Overflow

Migration from Vue2 to Vue3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related