# Unable to use plugin in deployed app (Aurelia 2-Beta 15)

**URL:** <https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415>\
**Category:** Help Requests\
**Created:** [April 20, 2024, 7:50pm UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415 "2024-04-20T19:50:18Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![zeko77](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zeko77/32/2258_2.png) [@zeko77](https://discourse.aurelia.io/u/zeko77)\
**Post date:** [April 20, 2024, 7:50pm UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/1 "2024-04-20T19:50:18Z")

</div>

I am testing a simple scenario of creating a plugin, publishing it on nuget, and using it in app.  
I used the default starter CLI app and plugin templates with typescript and webpack.  
App works on webpack’s dev server, and hello-world form plugin is displayed.  
When I build and deploy the app on nginx, I get AUR0016:InterfaceSymbol.  
DI is not working with the plugin elements.  
I tried different module formats and targets on plugin (web, node, commonjs, umd) to no avail.  
In order to avoid multiple instances, plugin is using aurelia as a dev dependency, and is not packing it. I have checked with analyzer.  
The plugin that I have created using rollup (no html elements, services only) works fine.  
I can create a repro solution if needed.

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [April 21, 2024, 9:34am UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/2 "2024-04-21T09:34:33Z")

</div>

Hi @zeko77! I have updated the [release notes](https://github.com/aurelia/aurelia/releases/tag/v2.0.0-beta.15) with a migration guide. Can you please re-check if that helps? If it does not help, please share a repro.

---

<div class="post-metadata">

**Author:** ![zeko77](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zeko77/32/2258_2.png) [@zeko77](https://discourse.aurelia.io/u/zeko77)\
**Post date:** [April 21, 2024, 9:48am UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/3 "2024-04-21T09:48:01Z")

</div>

Thank you for a fast response.  
I have already refactored the code to be Beta15 compliant according to guide:

1. No more decorators in consturctors, switched to resolve().
2. No more @bindable
3. I only use Aurelia decorators.

The code compiles and runs fine within a plugin (dev-app part).  
I publish the plugin and use it in the app.  
When I run the app using webpack-dev-server, it works. DI successfully resolves the plugin.  
When I build the app and deploy it, only then it does not.  
It gives me AUR0016 error that has to do with the DI.

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [April 21, 2024, 11:36am UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/4 "2024-04-21T11:36:14Z")

</div>

I assume that there might be a minor difference between the development and bundling/deployment configuration. However, I cannot be certain without seeing some code. If it is possible, please share a reproduction.

---

<div class="post-metadata">

**Author:** ![zeko77](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zeko77/32/2258_2.png) [@zeko77](https://discourse.aurelia.io/u/zeko77)\
**Post date:** [April 21, 2024, 3:14pm UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/5 "2024-04-21T15:14:53Z")

</div>

Here is the repro:

> **[GitHub - zeko77/aurelia-failing-plugin-repro: Repro where deployed au plugin...](https://github.com/zeko77/aurelia-failing-plugin-repro)**
>
> Repro where deployed au plugin that uses DI fails. Contribute to zeko77/aurelia-failing-plugin-repro development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [April 21, 2024, 7:34pm UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/6 "2024-04-21T19:34:07Z")

</div>

Thanks for the repro. I understand the issue now. It is how the plugin is bundled. The plugin bundle consists the aurelia dependencies. You can verify that when you add the following to your webpack configuration.

```js
    optimization: {
      concatenateModules: false,
    },

```

It looks like this

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/b/ba555ab4abdd223d3d3aefa86c1c446a7cf461ab.jpeg)

That is the reason, you are getting this error. The `IEventAggregator` used by your custom element is a different one (from the bundle) than that in your app.

I would suggest to not bundle your plugin at all. We did the same at work (w/o convention though).

---

<div class="post-metadata">

**Author:** ![zeko77](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zeko77/32/2258_2.png) [@zeko77](https://discourse.aurelia.io/u/zeko77)\
**Post date:** [April 21, 2024, 8:47pm UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/7 "2024-04-21T20:47:51Z")

</div>

Thank you. I suspected as much.  
I intentionally left the default plugin settings, as using DI in plugins is a common thing. So in order not to bundle anything with the plugin, I moved all dependencies of a plugin to dev dependencies. Node modules is excluded by nodeExternals, but some css related artifacts still remain.  
Anyways, there are no aurelia related modules bundled.

 ![plugin](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/2/2397bda76395fcba62254ae149e875d95a6024f1.jpeg)  
I still get the error.  
Any pointers on how to configure webpack in this case would be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![elitastic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitastic/32/1787_2.png) [@elitastic](https://discourse.aurelia.io/u/elitastic)\
**Post date:** [April 22, 2024, 6:12am UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/8 "2024-04-22T06:12:32Z")

</div>

@Sayan751, thanks for the migration guide.

If I understand the the guide correctly, this is no longer possible?

```auto
import { IRouter, IRouteableComponent } from '@aurelia/router-lite';

export class MyComponent {
  public constructor(@IRouter private readonly router: IRouter) { }
}

```

(from [router-lite docs](https://docs.aurelia.io/getting-to-know-aurelia/routing/aurelia-router-lite/navigating#using-the-router-api))

Furthermore, should the official Stackblitz template (when creating a [new github issue](https://github.com/aurelia/aurelia/issues/new?assignees=&labels=&projects=&template=bug_report.md)) be updated to support decorators again?

> **[Aurelia app - conventions webpack - StackBlitz](https://stackblitz.com/edit/au2-conventions?file=src%2Fmy-app.html)**
>
> Run Aurelia application with conventions

UPDATE:  
Sorry, I’ve just seen your pull request regarding the docs ([docs: update decorator usage by Sayan751 · Pull Request #1949 · aurelia/aurelia · GitHub](https://github.com/aurelia/aurelia/pull/1949))

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [April 22, 2024, 7:54am UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/9 "2024-04-22T07:54:37Z")

</div>

@zeko77 I think that webpack for the plugin is not a good fit. You probably need rollup to create a bundle. At least that’s what is done for the `@aurelia/X` packages. Have a look at the au2 repo for the rollup configuration.  
cc: @bigopon @huochunpeng

@elitastic Thanks for pointing out the starter templates. I will update those.

---

<div class="post-metadata">

**Author:** ![zeko77](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zeko77/32/2258_2.png) [@zeko77](https://discourse.aurelia.io/u/zeko77)\
**Post date:** [April 22, 2024, 8:11am UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/10 "2024-04-22T08:11:16Z")

</div>

Thank you. Will try and do that.  
A working plugin template that utilizes DI would be great.  
Will share if I succeed.

---

<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:** [April 22, 2024, 11:18am UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/11 "2024-04-22T11:18:59Z")

</div>

Agreed, Webpack is too much for plugin setup. While working on adding Vite support to our skeleton, I am also moving plugin template from webpack to vite (which uses rollup).

But there is some [gap](https://github.com/aurelia/aurelia/issues/1948) in our vite support, we need to work through that. It will take some time before we can ship official Vite based plugin skeleton.

---

<div class="post-metadata">

**Author:** ![zeko77](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zeko77/32/2258_2.png) [@zeko77](https://discourse.aurelia.io/u/zeko77)\
**Post date:** [April 24, 2024, 8:36pm UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/12 "2024-04-24T20:36:03Z")

</div>

I made progress with vite and rollup.  
Started with: [Aurelia app - conventions - Vite - StackBlitz](https://stackblitz.com/edit/au2-conventions-tvyh8c)  
Aurelia is stripped, and plugin with the DI shows up on deployed nginx server.  
Alas, the decorators like @watch are not working with vite.

---

<div class="post-metadata">

**Author:** ![zeko77](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zeko77/32/2258_2.png) [@zeko77](https://discourse.aurelia.io/u/zeko77)\
**Post date:** [April 25, 2024, 3:57pm UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/13 "2024-04-25T15:57:54Z")

</div>

The issue is indeed different webpack bundling for production and development.  
Dev bundle consistently uses aurelia.mjs packages everywhere, leading to correct behaviour of having a single container.  
Production bundle includes both cjs and mjs versions of aurelia, leading to separate containers for app and the plugin.

 ![prod-dev](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/7/7cf13db89461ee14a49d6dd34a7d86019f280fc1.jpeg)  
Plugin’s output is in webpack is “umd” , as modules are still experimental.  
Issue will be resolved with functioning vite/rollup based plugin template that outputs mjs for plugin.

And the solution is to add aurelia production aliases in webpack.config.js.  
They should point to `../../esm/index.mjs`, so:

```auto
 alias: production ? {
        // add your production aliases here
        ...getAureliaProdAliases()
      } : {
        ...getAureliaDevAliases()
        // add your development aliases here
      }
    },

```

and

```auto
function getAureliaProdAliases() {
  return [
    'aurelia',
    'fetch-client',
    'kernel',
    'metadata',
    'platform',
    'platform-browser',
    'route-recognizer',
    'router',
    'router-lite',
    'runtime',
    'runtime-html',
    'testing',
    'state',
    'ui-virtualization'
  ].reduce((map, pkg) => {
    const name = pkg === 'aurelia' ? pkg : `@aurelia/${pkg}`;
    try {
      const packageLocation = require.resolve(name);
      map[name] = path.resolve(packageLocation, `../../esm/index.mjs`);
    } catch {/**/ }
    return map;
  }, {});
}

```

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [April 27, 2024, 2:49am UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/14 "2024-04-27T02:49:57Z")

</div>

As I would like to avoid bundling the aurelia dependencies altogether when bundling the plugin, I have added the aurelia dependencies to the `externals` in webpack config.

```diff
    externals: [
      // Skip npm dependencies in plugin build.
      production && nodeExternals(),
+ production && /^(aurelia)$/i,
+ production && /^(@aurelia\/.+)$/i,
    ].filter(p => p),

```

This seems to work for me.

---

<div class="post-metadata">

**Author:** ![zeko77](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zeko77/32/2258_2.png) [@zeko77](https://discourse.aurelia.io/u/zeko77)\
**Post date:** [April 27, 2024, 6:26am UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/15 "2024-04-27T06:26:36Z")

</div>

I do the same. The issue does not lie within the plugin.  
The plugin is bundled without any dependencies and compiled as umd library.  
The issue is within the app consuming the umd plugin.  
When you build the consuming app, webpack includes the mjs version of aurelia (used by the app), and cjs aurelia (used by the plugin).  
Using the dev aliases for development build overrides this, and only mjs version of aurelia is used.  
The same needs to be done for the production build, otherwise you end up with DI unable to resolve dependencies used in the plugin.

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [April 27, 2024, 7:10am UTC](https://discourse.aurelia.io/t/unable-to-use-plugin-in-deployed-app-aurelia-2-beta-15/5415/16 "2024-04-27T07:10:35Z")

</div>

Sorry for the confusion. Misread your earlier post.