"default" property is missing from Vue export after upgrading typescript and tslib versions

123 Views Asked by At

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:

  1. I don't have default property imported from Vue.
  2. 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.

0

There are 0 best solutions below