Блог

Я работаю над проектом, использующим typescript 3.7.5, tslib 1.10.0 и vue 2.6.14. Недавно мы хотели обновить версию typescript и tslib, чтобы иметь typescript 4.x и tslib 2.x. Я обновил их до typescript 4.5.2, tslib 2.3.1, и после того, как я заменил свой файл js в исходном переопределении, я получаю ошибку от компонента frontent:

Uncaught TypeError: Cannot read properties of undefined (reading 'split')

Это, конечно, ни о чем не говорит, поэтому я начал копать. Я обнаружил, что причина этой проблемы в том, что после обновления версий typescript и tslib Vue больше не содержит свойства по умолчанию.

Мой компонент импортирует и экспортирует Vue вот так:

 import Vue, { Component as VueComponent, ComponentOptions, CreateElement, RenderContext, VNode } from "vue";  export default Vue;  export {  Vue,  // ... and some other components };  

Компонент интерфейса использует его следующим образом:

 import { Vue } from "my-component-package";  export const Sth = new Vue();  

В скомпилированном интерфейсном коде местом, которое приводит к другому результату, является этот метод:

 function _interopDefaultLegacy(e) {  return e amp;amp; "object" == typeof e amp;amp; "default" in e ? e : {  default: e  } }  

В результате:

1. У меня нет свойства по умолчанию, импортированного из Vue.
2. Мой объект выглядит так: { default: { someKey: SomeValue }} вместо: { someKey: SomeValue, default: { /* some props here */} }

В интерфейсном компоненте установлены эти флаги компиляции:

 {  "jsx": "preserve",  "importHelpers": true,  "moduleResolution": "node",  "sourceMap": true,  "declaration": true,  "experimentalDecorators": true,  "emitDecoratorMetadata": true,  "outDir": "./build",  "allowJs": false,  "resolveJsonModule": true,  "esModuleInterop": true, }  

В моем компоненте есть эти:

 {  "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.