MKD Client won't launch with nativescript-inappbrowser plugin

[timobiledev]

trafficstars

Hello there! Could you please suggest me what am I doing wrong?

I am trying to add nativescript-inappbrowser plugin to my MDK project. That is the error that causes application to crash:

mdk.trace.app: Error: SyntaxError: Cannot use import statement outside a module SyntaxError: Cannot use import statement outside a module

Page contains input for URL and a button that opens that URL in WebView. I am using a rule that handles click of the button.

import { InAppBrowser } from "nativescript-inappbrowser";

export default async function openLink(context) {
  const Utils = clientAPI.nativescript.utilsModule;
  const Dialogs = clientAPI.nativescript.uiDialogsModule;
  const url = context
    .getPageProxy()
    .getControl("SectionedTable0")
    .getControl("url")
    .getValue();

  try {
    if (await InAppBrowser.isAvailable()) {
      const result = await InAppBrowser.open(url, {
        // iOS Properties
        dismissButtonStyle: "cancel",
        preferredBarTintColor: "#453AA4",
        preferredControlTintColor: "white",
        readerMode: false,
        animated: true,
        modalPresentationStyle: "fullScreen",
        modalTransitionStyle: "coverVertical",
        modalEnabled: true,
        enableBarCollapsing: false,
        // Android Properties
        showTitle: true,
        toolbarColor: "#6200EE",
        secondaryToolbarColor: "black",
        enableUrlBarHiding: true,
        enableDefaultShare: true,
        forceCloseOnRedirection: false,
        // Specify full animation resource identifier(package:anim/name)
        // or only resource name(in case of animation bundled with app).
        animations: {
          startEnter: "slide_in_right",
          startExit: "slide_out_left",
          endEnter: "slide_in_left",
          endExit: "slide_out_right",
        },
        headers: {
          "my-custom-header": "my custom header value",
        },
        hasBackButton: true,
        browserPackage: "",
        showInRecents: false,
      });
      Dialogs.alert({
        title: "Response",
        message: JSON.stringify(result),
        okButtonText: "Ok",
      });
    } else {
      Utils.openUrl(url);
    }
  } catch (error) {
    Dialogs.alert({
      title: "Error",
      message: error.message,
      okButtonText: "Ok",
    });
  }
}

My environment info:

Key	Value
tns -v	6.8.0
MDK SDK	5.0.1
OS	macOS 11.0.1
tns-android	6.5.3

[jitendrakansal]

@timobiledev There seems some changes in latest version of nativescript-inappbrowser plugin, MDK still uses importing from tns-core-modules/data/observable (we'll support import from @nativescript/core in our future release) What you need to do is:

• in MDKProject.json file, update NSPlugins parameter specifying the support plugin version

"NSPlugins": ["[email protected]"], (there is no change required in Externals)

• Re-create your MDK client

[timobiledev]

@jitendrakansal thank you for your suggestion, I've tried version 2.3.0 of nativescript-inappbrowser (I've rebuilt MDK client from scratch as you suggested) and it produces following error:

JS: mdk.trace.app: Error: Error: com.tns.NativeScriptException: Failed to find module: "./utils.android", relative to: app/tns_modules/nativescript-inappbrowser/ require(:1:266)
JS: 	at (file:///data/data/app.id/files/app/tns_modules/nativescript-inappbrowser/InAppBrowser.js:14:23)
JS: 	at require(:1:266)
JS: 	at RequireUtil.require(file:///data/data/app.id/files/app/tns_modules/mdk-core/utils/RequireUtil.js:98:24)
JS: 	at webpackUniversalModuleDefinition(file:///data/data/app.id/files/app/bundle.js:3:28)
JS: 	at (file:///data/data/app.id/files/app/bundle.js:10:3)
JS: 	at require(:1:266)
JS: 	at module.exports.push../definitions/BundleDefinitionLoader.ts.BundleDefinitionLoader.loadBundle(file: app/definitions/BundleDefinitionLoader.ts:92:33)
JS: 	at module.exports.push../Application.ts.Application._setDefinitionProvider(file: app/Application.ts:827:34)
JS: 	at module.exports.push../Application.ts.Application.start(file:///data/data/...

The strange thing is that in node_modules/nativescript-inappbrowser there is a file called utils.android.js, but in platforms/android/app/src/main/assets/app/tns_modules/nativescript-inappbrowser there is not.

MDKProject.json

{
    "AppName": "AppName",
    "AppVersion": "1.0.0",
    "BundleID": "app.id",
    "Externals": ["nativescript-inappbrowser"],
    "NSPlugins": ["[email protected]"],
    "UrlScheme": "mdkclient"
}

[jitendrakansal]

@timobiledev do you get that error during create-client build or while tns run?

[timobiledev]

@jitendrakansal during tns run android

[timobiledev]

On vanilla nativescript application generated with tns create MyApp --js --appid my.app plugin [email protected] works flawlessly.