Using Vue3 with meteor (angular + vue) application causing _interopRequireDefault error

VueJS
1

When i am trying to update meteor application (angularjs + vue2) → (angularjs + vue3), i am getting below error in browser console as soon as i load url.

Uncaught TypeError: _interopRequireDefault is not a function
    at module (FormRating.vue:2:4)

My hunch is that cause of this error has something to do with bable, more specifically, something to do with import and export

Due to legacy dependency, my application still use babel 5 for processiong .js file, where as the vue:vue3 package uses babel 7, i think that is what causing issue.

Any suggestion by anyone what might be best thing to do? thanks in advance

3

I have fixed the babel mismatch thing but still i get this error, looks like this issue is something else.

pls help, any suggestions?

4

Since you are deviating from the normal Vue 3 setup, which expects Vite, it probably will be rather difficult to find help on the matter. Would it be an option for you to move to Meteor 3 and make the angular parts of your app use Vue as well?

5

hey @vooteles , thanks for the reply.

It may be possible to move to meteor 3 soon but changing angular to vue 100% will take lot of time, we have been moving always from angularjs to vue2 since last 2 years, as vue2 is now totally closed with stopped vulnerability support, its important for us to update vue2 to vue3.

6

As am still blocked, trying to fix,

I observed that transpiled code looks like this

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                                     //
// client/pluto/imports/core/ui/form/components/FormFileUploader.vue.js                                                //
//                                                                                                                     //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                                                                                                                       //
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

i think below line is causing issue

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
7

Hi guys,

The error is resolved now.

The issue is with vuejs:vue3 package, the babel compiles the code without any modern JS support when processing script section of a vue component.

Solution is, in the package, above the line (i.e Babel.compile) add below two lines

babelOptions.presets = [
  ['@babel/preset-env', { targets: { node: 'current' } }] 
];
babelOptions.plugins = ['@babel/plugin-transform-runtime']