CODEWITHSUNDEEP
javascripttypescriptvue.jsweb-componentvue-cli
leonheess
leonheess

Reputation: 21391

How to prevent TypeScript/Vue from renaming classes with underscore on build?

I have a fairly simple class inside my web-component:

import {WorkItem} from '@/model/WorkItem'
   
const Data = 'data'

class ReqItem extends WorkItem {
  constructor(
    id: string,
    name: string,
  ) {
    super(id, name, Data)
  }
}

export {Data, ReqItem}

The problem is when TypeScript/Vue builds the entire thing into a web-component (command: vue-cli-service build --target wc --name x) it renames this class to Filename_Classname, which in this case is ReqItem_ReqItem like so:

// CONCATENATED MODULE: ./src/model/ReqItem.ts

const Data = 'data'

class ReqItem_ReqItem extends WorkItem {
  constructor(id, name) {
    super(id, name, Data);
  }

}

Why does this happen and how can it be prevented? As soon as I remove the extends the problem vanishes.

Edit: It keeps getting weirder: When I put the class and the class it extends (ReqItem and WorkItem) into one file the problem disappears.

Upvotes: 1

Views: 660

Answers (1)

leonheess
leonheess

Reputation: 21391

The problem was with the index.ts which looked like this:

.
.
export {WorkItem} from './WorkItem'
export {ReqItem} from './ReqItem'
.
.

changing it to

.
.
export * from './WorkItem'
export * from './ReqItem'
.
.

as described here resolved the issue.

Upvotes: 1

Related Questions