NPM plugins which depend on other NPM plugins don't work in Playground

Did you search for the problem in other open issues in this repo?

Yes. It may be a function of the (very general) #79, but that just suggests making things better. It's very related to https://github.com/nativescript-community/ble/issues/163 but that was filed as a BLE issue and it isn't: it's specifically a Playground issue which does not occur outside the playground.

Tell us about the problem

NPM plugins which are added to a project in Playground need to be imported in a different way. As https://www.tjvantoll.com/2018/03/02/playground-plugins/ describes it:

// a plugin might normally be imported like this
import * as email from "nativescript-email";

// This code will not work in Playground, because in Playground, the plugin is part of your
// app’s app folder. Meaning, the path you need to use to import the plugin must be
// relative to the file you’re using it in. Therefore it must be imported like this:
import * as email from "../nativescript-email";

This is fine, of course, but it has a big problem where there is an NPM plugin which depends on another NPM plugin. For example, @nativescript-community/ble depends on @nativescript-community/observable (see line 1 in src/bluetooth.common.ts which is import Observable from '@nativescript-community/observable';)

This import line won't work, because it's trying to import from the wrong place. In practice, therefore, this pretty much means that any NPM plugin which depends on another NPM plugin won't work in the Playground, even if otherwise it probably should. This seems a shame and a bit of a missed opportunity!

Did you try it outside of {N} Playground?

No (because this is a Playground-specific issue, I believe)

Which browser are you using?

Mozilla (although it shouldn't make any difference)

Are there any errors/warnings logged in your browser console?

Which platform(s) does your issue occur on?

iOS (I imagine this will happen on both because it's a JS issue)

Please provide the following information shown in the devices tab in the playground:

Model: iOS device
OS version: iOS 15.2.1
Preview app version: 1.31.0
Runtime version: 6.5.3

Please tell us how to recreate the issue with as much detail as possible.

I can't send a playground link because I'm not allowed to save a project which doesn't compile. So:

create a new project
add @nativescript-community/ble to it as an NPM package
add code to try using Bluetooth to somewhere relevant:

import { Bluetooth } from '@nativescript-community/ble';
var bluetooth = new Bluetooth();

bluetooth.isBluetoothEnabled().then(
  function(enabled) {
    console.log("Enabled? " + enabled);
  }
);

build and run and observe that Preview on iOS crashes, and on restarting to get logs see that it's failing to find Observable, from line 1 in bluetooth.common.js above.

NativeScript / playground-feedback