NS v6.2 webpack not finding imported enum

[RobertGardner]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 6.2.0
• Cross-platform modules: 6.2.0
• Android Runtime: 6.2.0
• iOS Runtime: 6.2.0
• Plugin(s): Nativescript-Stripe v6.1.0

This is happening on iOS. I haven't tried it on Android.

Describe the bug This is happening with the nativescript-stripe plugin, where I am a contributor.

I updated from NS 6.1 to NS 6.2. I then updated the plugin's /demo app using tns update, and updated webpack.config.js by running the webpack script. This resulted in versions listed above and nativescript-dev-webpack": "~1.3.0".

When I build, I do not get any compile errors, but I get a webpack warning:

WARNING in ./demo/stripe.service.ts 26:63-89
"export 'StripeShippingAddressField' was not found in 'nativescript-stripe/standard'
 @ \b_[\w-]*\.)scss)$ (. sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$)
 @ ./app.ts

and when I run, I get a runtime error:

JavaScript stack trace:
StripeService(file:///app/demo/stripe.service.ts:34:86)
at navigatingTo(file:///app/demo/std-page.ts:12:35)
...
JavaScript error:
file:///app/demo/stripe.service.ts:34:86: JS ERROR TypeError: undefined is not an object (evaluating 'nativescript_stripe_standard__WEBPACK_IMPORTED_MODULE_0__["StripeShippingAddressField"].PostalAddress')

The relevant code in the plugin is:

/src/standard/index.d.ts:
export declare const enum StripeShippingAddressField {
  Name = "name",
  PostalAddress = "address",
  Phone = "phone",
  Email = "email"
}

and

/src/standard/standard.ios.ts:
import { StripeShippingAddressField } from "./standard.common";
...
/src/standard/standard.common.ts:
export const enum StripeShippingAddressField {
  Name = "name",
  PostalAddress = "address",
  Phone = "phone",
  Email = "email"
}

Finally, the code in the demo app that calls it is:

/demo/app/demo/stripe.service.ts:
import { StripeShippingAddressField } from "nativescript-stripe/standard";
...
StripeConfig.shared().requiredShippingAddressFields = [StripeShippingAddressField.PostalAddress];

The generated bundle code looks correct:

bundle.js:
module.exports =
(global["webpackJsonp"] = global["webpackJsonp"] || []).push([["bundle"],{

/***/ "../../src/standard/standard.common.ts":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
...

/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StripeShippingAddressField", function() { return StripeShippingAddressField; });
...
var StripeShippingAddressField;
(function (StripeShippingAddressField) {
    StripeShippingAddressField["Name"] = "name";
    StripeShippingAddressField["PostalAddress"] = "address";
    StripeShippingAddressField["Phone"] = "phone";
    StripeShippingAddressField["Email"] = "email";
})(StripeShippingAddressField || (StripeShippingAddressField = {}));
; 

but somehow webpack is unable to find StripeShippingAddressField when the demo app is built.

Final note: Everything builds and runs correctly with NS 6.1.

[Fatme]

Hey @RobertGardner,

Final note: Everything builds and runs correctly with NS 6.1.

I wasn't able to build and run the demo application with NS 6.1. I received the built time warning

WARNING in ./demo/stripe.service.ts 26:63-89
"export 'StripeShippingAddressField' was not found in 'nativescript-stripe/standard'
 @ \b_[\w-]*\.)scss)$ (. sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$)
 @ ./app.ts

and the runtime error as well:

JavaScript stack trace:
StripeService(file:///app/demo/stripe.service.ts:34:86)
at navigatingTo(file:///app/demo/std-page.ts:12:35)
...
JavaScript error:
file:///app/demo/stripe.service.ts:34:86: JS ERROR TypeError: undefined is not an object (evaluating 'nativescript_stripe_standard__WEBPACK_IMPORTED_MODULE_0__["StripeShippingAddressField"].PostalAddress')

It seems the issue is reproduced with NS v6+ and introduced with NativeScript v6.0 release since the applications are built only using webpack-only workflow. There is a detailed description of the problem here.

As it is described in the above mentioned thread, the workaround is to set transpileOnly option of ts-loader to false. This way the files will NOT be transpiled one at a time, the compiler will have the whole program information and will know if the reference it is looking at is a const enum or not.

NOTE: This might decrease the build time performance of your application.