Vue 2 to Vue 3 Migration using vue/compat

[kumarimanjari]

Hello Team,

We are trying to migrate our project from Vue2 to Vue3 and following the required migration guide for the same.
We have tried changing the versions of Vue and vue/compat as same , also different but every time we are facing issue which is obviously different in nature.
Some of the errors which we received are as follows -

Our vue.config.js file is -

const CopyWebpackPlugin = require('copy-webpack-plugin');
const { resolveConfig } = require('@vue/compat');

module.exports = {
  configureWebpack: {
    devtool: 'source-map',
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: 'src/main/webapp/WEB-INF', to: 'WEB-INF' }
          },
        ],
      }),
    ],
  },
  resolve: {
    alias: {
      vue: '@vue/compat',
    },
  },
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: {
              MODE: resolveConfig.MODE.VUE2,
            },
          },
        };
      });
  },
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
};

Our package.json file looks as below -

"dependencies": {
    "@vue/compat": "3.3.13",
    "axios": "^1.2.3",
    "bamboo-jest-reporter": "^1.0.3",
    "core-js": "^3.8.3",
    "jest-junit": "^15.0.0",
    "jest-sonar": "^0.2.15",
    "jw-paginate": "^1.0.4",
    "lodash": "^4.17.21",
    "vue-i18n": "9.2.2",
    "vue-router": "^4.1.6",
    "vuedraggable": "^2.24.3",
    "vuex": "4.1.0",
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@intlify/vue-i18n-loader": "^1.0.0",
    "@types/lodash": "^4.14.195",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/test-utils": "^2.2.6",
    "@vue/vue3-jest": "^27.0.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.5.1",
    "babel-plugin-transform-require-context": "^0.1.1",
    "bamboo-jest-reporter": "^1.0.3",
    "copy-webpack-plugin": "^11.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "jest-junit": "^15.0.0",
    "jest-sonar-reporter": "^2.0.0",
    "jest-unit": "0.0.2",
    "sonar-scanner": "^3.1.0",
    "vue-cli-plugin-i18n": "~1.0.1"
  },

[kumarimanjari]

Hello Team,

Could you please provide suggestions on the issue.

[LinusBorg]

The "resolve" option belongs inside of the configureWebpack option, but you put it below that option, on the same level.

[kumarimanjari]

We tried this as well and we got below errors in our application --

Also an update we have below versions of Vue and Vue compat -

"vue": "3.4.13",
"@vue/compat": "^3.4.21",

C:\git\XYZComponent.vue
   26:26  error  Unexpected mutation of "some property" prop  vue/no-mutating-props
   50:26  error  Unexpected mutation of "some property" prop  vue/no-mutating-props
   76:26  error  Unexpected mutation of "some property" prop  vue/no-mutating-props
  100:26  error  Unexpected mutation of "some property" prop  vue/no-mutating-props

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
error  in ./src/ABC/ABC/ABC.vue
 
Module Error (from ./node_modules/thread-loader/dist/cjs.js):
 
VueCompilerError: <template v-for> key should be placed on the <template> tag.
at C:\git\ABCsComponent.vue:26:17
24 |                <sortable-header-component :columnLabel="getLabel(header)" :sortOrder="sortOrder[index]"
25 |                  :columnIndex="index" :dataToSort="sortedDealerList" @sortedData="updateSortedData"
26 |                  :key="index + Math.random()" :selectedColumn="clickedColumn" />
   |                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
27 |              </template>
28 |            </tr>

unable to locate 'C:/git/frontend/src/main/webapp/WEB-INF' glob
 
ERROR  Error: Build failed with errors.
Error: Build failed with errors.
    at C:\node_modules\@vue\cli-service\lib\commands\build\index.js:207:23
    at C:\node_modules\webpack\lib\webpack.js:159:8
    at C:\node_modules\webpack\lib\HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (C:\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\node_modules\tapable\lib\Hook.js:18:14)
    at Cache.shutdown (C:\node_modules\webpack\lib\Cache.js:156:23)
    at C:\node_modules\webpack\lib\Compiler.js:1358:15
    at Hook.eval [as callAsync] (eval at create (C:\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)

[kumarimanjari]

@LinusBorg - Do you have any suggestions on this?

[LinusBorg]

My recommendation would be to read the migration guide and fix the errors in your app that the error messages tell you to fix.

[kumarimanjari]

So we should keep the vue.config.js to use MODE:2 and package.json should also be as it is and start fixing the issue right?

[LinusBorg]

Yes

[kumarimanjari]

Hello @LinusBorg, we did resolve all the warnings coming along the way. As of now, we are getting below errors while doing npm run build -

ERROR  TypeError: decode_js.EntityDecoder is not a constructor
TypeError: decode_js.EntityDecoder is not a constructor
    at new Tokenizer (C:\DEF\ABC\frontend\node_modules\@vue\compat\dist\vue.cjs.prod.js:11211:28)
    at Object.<anonymous> (C:\DEF\ABC\frontend\node_modules\@vue\compat\dist\vue.cjs.prod.js:12645:19)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (C:\DEF\ABC\frontend\node_modules\@vue\compat\index.js:4:20)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1

Could you please help.

[kumarimanjari]

Hello @LinusBorg - Do you have some suggestions for the above error.

[LinusBorg]

This looks like a bug. I think we have an open issue for that, would need to look it up.

[kumarimanjari]

Thank you for the response, could you please give me the link for the issue?

[kumarimanjari]

It seems this is the one - #10609