# Using a plugin built from cli

**URL:** <https://discourse.aurelia.io/t/using-a-plugin-built-from-cli/2633>\
**Category:** Help Requests\
**Created:** [June 11, 2019, 5:25pm UTC](https://discourse.aurelia.io/t/using-a-plugin-built-from-cli/2633 "2019-06-11T17:25:45Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![m0ngr31](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/m0ngr31/32/1535_2.png) [@m0ngr31](https://discourse.aurelia.io/u/m0ngr31)\
**Post date:** [June 11, 2019, 5:25pm UTC](https://discourse.aurelia.io/t/using-a-plugin-built-from-cli/2633/1 "2019-06-11T17:25:45Z")

</div>

We’ve recently broken out a good sized portion of our app (component library) into its own plugin so we could share with other apps going forward. Creating the plugin and getting it working was pretty painless, but now we’re having some issues actually trying to use it.

Maybe it’s from ignorance on my part, but I assumed it would just be as simple as bringing it into the main.ts file as a module, and then changing all the references for the value-converters and such would be all that’s needed, but it’s just not working.

Webpack seems to compile just fine, but when I load the page, it throws an error message that is less than helpful: [https://pastebin.com/AUrPKDb3](https://pastebin.com/AUrPKDb3)

The only thing I can think of is how I’m importing some of the modules?

For example going from this:

```auto
import {SharedNav} from 'resources/components/navs/v-nav-vertical-sliding/shared-nav-service';

```

To this:

```auto
import {SharedNav} from 'bindable/dist/native-modules/components/navs/v-nav-vertical-sliding/shared-nav-service';

```

Or even something like this:

```auto
this.dialogService.open({
    model: {
        bodyModel: {
            messages,
            message: `Cannot delete ${ruleWord} below because ${correctWording} in use`,
        },
        bodyViewModel: PLATFORM.moduleName('resources/dialogs/notifications/notifications-modal-body'),
        footerEnable: true,
        footerViewModel: PLATFORM.moduleName('resources/dialogs/notifications/notifications-modal-footer'),
        size: 'medium',
        title: `Errors occurred`,
    },
    viewModel: PLATFORM.moduleName('bindable/dist/native-modules/components/modal/v-modal/v-modal'),
});

```

Any suggestions?

---

<div class="post-metadata">

**Author:** ![brandonseydel](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brandonseydel/32/993_2.png) [@brandonseydel](https://discourse.aurelia.io/u/brandonseydel)\
**Post date:** [June 11, 2019, 6:05pm UTC](https://discourse.aurelia.io/t/using-a-plugin-built-from-cli/2633/2 "2019-06-11T18:05:35Z")

</div>

small repo or folder heirarchy? Initial thought…change

PLATFORM.moduleName(‘bindable…  
to  
PLATFORM.moduleName(’/bindable

---

<div class="post-metadata">

**Author:** ![m0ngr31](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/m0ngr31/32/1535_2.png) [@m0ngr31](https://discourse.aurelia.io/u/m0ngr31)\
**Post date:** [June 11, 2019, 7:10pm UTC](https://discourse.aurelia.io/t/using-a-plugin-built-from-cli/2633/3 "2019-06-11T19:10:01Z")

</div>

That seems to just link to the root of my project as opposed to looking in the `node_modules` folder.

---

<div class="post-metadata">

**Author:** ![brandonseydel](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brandonseydel/32/993_2.png) [@brandonseydel](https://discourse.aurelia.io/u/brandonseydel)\
**Post date:** [June 11, 2019, 7:14pm UTC](https://discourse.aurelia.io/t/using-a-plugin-built-from-cli/2633/4 "2019-06-11T19:14:04Z")

</div>

Ok. I was unsure of the package location. Is that a local, private, or public repo? If public, can you provide the package name?

---

<div class="post-metadata">

**Author:** ![m0ngr31](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/m0ngr31/32/1535_2.png) [@m0ngr31](https://discourse.aurelia.io/u/m0ngr31)\
**Post date:** [June 11, 2019, 8:47pm UTC](https://discourse.aurelia.io/t/using-a-plugin-built-from-cli/2633/5 "2019-06-11T20:47:48Z")

</div>

Unfortunately it’s a private git repo.

---

<div class="post-metadata">

**Author:** ![m0ngr31](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/m0ngr31/32/1535_2.png) [@m0ngr31](https://discourse.aurelia.io/u/m0ngr31)\
**Post date:** [June 11, 2019, 9:14pm UTC](https://discourse.aurelia.io/t/using-a-plugin-built-from-cli/2633/6 "2019-06-11T21:14:30Z")

</div>

But if it would help, I could zip up the repo

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [June 11, 2019, 11:15pm UTC](https://discourse.aurelia.io/t/using-a-plugin-built-from-cli/2633/7 "2019-06-11T23:15:46Z")

</div>

I am surprised our aurelia-webpack-plugin didn’t support the full path `"bindable/dist/native-modules/components/..."`. I am pretty sure our webpack plugin support the conventional path `"bindable/components/..."`, just drop the “dist/nativej-modules/”.

On the other side, an app with cli built-in bundler (not webpack) supports both full path and conventional path.

You can use conventional path in `PLATFORM.moduleName(...)` too.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [June 11, 2019, 11:20pm UTC](https://discourse.aurelia.io/t/using-a-plugin-built-from-cli/2633/8 "2019-06-11T23:20:43Z")

</div>

A tip in writing plugin, if you do some verbose re-export in `src/index.js`, you can help the plugin consumers.

```auto
export function configure(config) {}
export * from './components/...';
export * from './components/...';

```

Then plugin consumer can do

```auto
import {SharedNav, SomeOther} from 'bindbale';

```

---

<div class="post-metadata">

**Author:** ![m0ngr31](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/m0ngr31/32/1535_2.png) [@m0ngr31](https://discourse.aurelia.io/u/m0ngr31)\
**Post date:** [June 11, 2019, 11:25pm UTC](https://discourse.aurelia.io/t/using-a-plugin-built-from-cli/2633/9 "2019-06-11T23:25:28Z")

</div>

That’s what I played with today… But still no dice. Webpack doesn’t seem to have a problem. But this webpack was rolled by hand a year or longer ago (converted from jspm + gulp). Tomorrow I’m going to experiment with making a new app with the cli and importing the plugin into it 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![brandonseydel](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brandonseydel/32/993_2.png) [@brandonseydel](https://discourse.aurelia.io/u/brandonseydel)\
**Post date:** [June 12, 2019, 2:55am UTC](https://discourse.aurelia.io/t/using-a-plugin-built-from-cli/2633/10 "2019-06-12T02:55:03Z")

</div>

Please do. I will spin up cli and try importing.

---

<div class="post-metadata">

**Author:** ![m0ngr31](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/m0ngr31/32/1535_2.png) [@m0ngr31](https://discourse.aurelia.io/u/m0ngr31)\
**Post date:** [June 13, 2019, 3:28pm UTC](https://discourse.aurelia.io/t/using-a-plugin-built-from-cli/2633/12 "2019-06-13T15:28:34Z")

</div>

I think I got it figured out. Had to change some webpack settings to deal with the CSS being imported differently than it is currently in our app. Also had to make sure that I didn’t use any mapped paths in the plugin itself. Wouldn’t compile in webpack unless I used relative import paths.