Common UI component fails after migration from {N} 6.8 to 8.1 with error: instanceType is not a constructor

Issue Description

I created a very simple common UI component, blue-text, and included it in a Hello World Nativescript 6.8 JavaScript project; It works as expected.

blue-text.js:

/**
 * BlueText Custom UI Component
 * Derived from https://github.com/mikebranstein/TheNativeScriptBook/blob/master/AppendixB/PetScrapbook/app/views/shared/scrapbook-list/scrapbook-list.js 
 * Invocation: 
 * <page xmlns:bt="shared/blue-text/blue-text" ... />
 * <bt:BlueText text="This is blue text" ... />
 */

// For {N} 6
const Label = require("tns-core-modules/ui/label").Label;

// For {N} 8
// import {Label} from "@nativescript/core";

var BlueText = (function (_super) {

  __extends(BlueText, _super);

  function BlueText() {
    _super.call(this);

    this.style = "color: blue;"; 

  }; // end BlueText function
  return BlueText;
})(Label);  // Specify parent class

exports.BlueText = BlueText;

main-page.xml:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:bt="shared/blue-text/blue-text" navigatingTo="onNavigatingTo">
...
<bt:BlueText text="This is blue text" />
...

Then, I upgrade the NativeScript CLI to 8.1.5, migrate the project, make the changes necessary eliminate the build errors (e.g., removing tildes, changing require’s to import’s, etc) and run the project. It fails with the message

System.err:  > Building UI from XML. @main-page.xml:30:9
System.err:    > Module 'shared/blue-text/blue-text' not found for element 'shared/blue-text/blue-text:BlueText'.
System.err:    > instanceType is not a constructor

This might be a Webpack problem or a problem caused by moving to ES2017, but I’ve been unable to find any information to make progress.

Reproduction

https://github.com/dlcole/cctester

Relevant log output (if applicable)

System.err:  > Building UI from XML. @main-page.xml:30:9
System.err:    > Module 'shared/blue-text/blue-text' not found for element 'shared/blue-text/blue-text:BlueText'.
System.err:    > instanceType is not a constructor

Environment

OS: macOS 11.6
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Shell: /bin/bash
node: 16.13.0
npm: 8.1.0
nativescript: 8.1.5

# android
java: 1.8.0_192
ndk: Not Found
apis: 28
build_tools: 28.0.3
system_images: 
  - android-28 | Google APIs Intel x86 Atom

# ios
xcode: 13.1/13A1030d
cocoapods: 1.8.4
python: 2.7.16
python3: 3.9.5
ruby: 2.6.3
platforms: 
  - DriverKit 21.0.1
  - iOS 15.0
  - macOS 12.0
  - tvOS 15.0
  - watchOS 8.0

Dependencies

"dependencies": {
  "@nativescript/core": "~8.1.1",
  "@nativescript/theme": "~2.3.0"
},
"devDependencies": {
  "@nativescript/android": "8.1.1",
  "@nativescript/webpack": "~5.0.0"
}

• I have searched the existing issues as well as StackOverflow and this has not been posted before
• This is a bug report
• I agree to follow this project’s Code of Conduct

[dlcole]

Ha! That works! Thanks so much for your help and quick response, @NathanWalker

I’ll close this issue, but it can likely help anyone else trodding the same migration path.

[dlcole]

It took me two days to figure this out, but here’s what I’ve found: in NS 6, the line

GridTab.tabTapEvent = "tabTap"; // Specify custom events for this class

apparently created an event listener, and that doesn’t happen with NS 7 and later. That means the custom component must create its own listener, such as (within onLoaded):

    if (this.tabTap) {
      let handler = this.page.exports[this.tabTap]; // get associated handler 
      this.on("tabTap", handler, this); // add listener to receive notify
    }

Now, there’s a listener in place to receive the notify() and I can propagate an event from a child element.

Since I’ve resolved the problem I’ll close this issue. Overall I could probably have saved a week if there had been documentation on migrating custom components from NS 6 to 7+.