Using a plugin built from cli

Help Requests
1

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

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

For example going from this:

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

To this:

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

Or even something like this:

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?

1 Like
2

small repo or folder heirarchy? Initial thought…change

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

3

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

1 Like
4

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

1 Like
5

Unfortunately it’s a private git repo.

1 Like
6

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

1 Like
7

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.

1 Like
8

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

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

Then plugin consumer can do

import {SharedNav, SomeOther} from 'bindbale';
1 Like
9

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 :man_shrugging:

1 Like
10

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

1 Like
12

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.

2 Likes