nativescript-svg: Building Library results in "This dependency was not found"

[dangrima90]

I'm currently working on a project where we're building our code into an npm package which we can then use internally across different projects. I've just added nativescript-svg plugin to allow us to have an icon component.

We're using nativescript-vue - the plugin works well with vue as we are already using the plugin in other apps. However when trying to build we get the following error:

This dependency was not found .... To install it, you can run: npm install --save @sergeymell/nativescript-svg/index.

This is the code we have, all that's happening is that we have a wrapper component around the SVGImage and we're making use of the fromData function.

<template>
  <SVGImage
    width="32"
    height="32"
    :src="svgImage"
  />
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api";
import { fromData } from "@sergeymell/nativescript-svg";

import WebIcon from "./Icon.vue";

export default defineComponent({
  extends: WebIcon,

  computed: {
    svgImage() {
      return fromData(this.svg);
    }
  }
});
</script>

You will notice that the error I listed above states that the module to instal is @sergeymell/nativescript-svg/index. My suspicion is that this is happening because of the following setup:

https://github.com/SergeyMell/nativescript-plugins/blob/a0e622797a25cc0a012e5bb9dd09f835154dc397/packages/nativescript-svg/package.json#L5

What I noticed is that the main file in the package.json is referencing index which doesn't seem to exist in the package that's being installed in the node_modules:

Could this be related to the issue we're having?

[SergeyMell]

Hi @dangrima90 Probably you're right, but let me check it first on my side Give me please a bit more information on how do you build your plugin?

[dangrima90]

Hi @SergeyMell, build process is done via Vue CLI (as we are working in a Vue based project) using the following command:

vue-cli-service build --target lib --no-unsafe-inline --formats umd ./src/index.js

I think the issue is related to how we are building - from my tests even other libraries are failing. For example I tried importing using Util.openFile(...) from @nativescript/core and I got a similar error when building.

Workaround

I found a workaround for the issue by ignoring the libraries I don't want to be included in the bundle via Webpack.

In Vue CLI one can add extra Webpack configuration in the vue.config.js file.

Example:

module.exports = {
    output: {
        libraryExport: 'default'
    },
    externals: {
        "@sergeymell/nativescript-svg": "@sergeymell/nativescript-svg"
    }
};

This workaround is working well so far - I still find it weird because in the code snippet I sent above all the code is doing is importing a function.

[SergeyMell]

Well, it seems that the problem happens because you're building the plugin, not in some specific iOS or Android environment. That's why the correspondent index..ts is not substituted by nativescript builder. Let me try to make some possible fix in a separate branch and I'll let you know once I'll publish it and you could give it a try. Glad that you've found a workaround because this will take me some time since right now I'm a bit busy (also with migrating the plugin to NS8)

[dangrima90]

Thank you for your reply @SergeyMell, like you said I think the problem is related to how we are building the code. For now I have a workaround so it's fine really. Maybe in the future I'll see how we can change the build process to be more the "nativescript way".