I am working on a project using typescript 3.7.5, tslib 1.10.0 and vue 2.6.14. Recently we wanted to upgrade typescript and tslib version, to have typescript 4.x and tslib 2.x. I upgraded them to typescript 4.5.2, tslib 2.3.1 and after I replaced my js file in source overrride I am getting an error from frontent component:
Uncaught TypeError: Cannot read properties of undefined (reading 'split')
This of course doesn't say anything, so I started digging. I discovered the reason of this issue is that after upgrade of typescript and tslib versions Vue doesn't contain default property anymore.
My component imports and exports Vue like this:
import Vue, { Component as VueComponent, ComponentOptions, CreateElement, RenderContext, VNode } from "vue";
export default Vue;
export {
Vue,
// ... and some other components
};
Frontend component uses it like this:
import { Vue } from "my-component-package";
export const Sth = new Vue();
In the compiled frontend code the place that producec a different result is this method:
function _interopDefaultLegacy(e) {
return e && "object" == typeof e && "default" in e ? e : {
default: e
}
}
As a result:
- I don't have default property imported from Vue.
- My object looks like this:
{ default: { someKey: SomeValue }}
instead of:{ someKey: SomeValue, default: { /* some props here */} }
Frontend component has those compilation flags set up:
{
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"sourceMap": true,
"declaration": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"outDir": "./build",
"allowJs": false,
"resolveJsonModule": true,
"esModuleInterop": true,
}
My component has these:
{
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"sourceMap": true,
"declaration": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"allowJs": false,
}
Target is es5, module type is CommonJS for both.
I tried with using those flags:
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
on both sides, but it didn't change anything.
I would like to ask for help with understanding the issue with default export/import from vue - how upgrading typescript and tslib affected how this module is exported / imported. And of course help with finding out the possible solution for that.
Thank you in advance.