# Possible to change a plugin's source and watch changes in the consuming application

**URL:** <https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166>\
**Category:** Framework Knowledge\
**Created:** [January 17, 2020, 9:45pm UTC](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166 "2020-01-17T21:45:23Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![pwoosam](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/pwoosam/32/1692_2.png) [@pwoosam](https://discourse.aurelia.io/u/pwoosam)\
**Post date:** [January 17, 2020, 9:45pm UTC](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166/1 "2020-01-17T21:45:23Z")

</div>

Hi all,

My team is looking into using Aurelia plugins as the backbone for a microfrontend architecture.

We would like to be able to make changes to a local copy of the plugin while running the SPA that consumes the plugin and get live updated via the `--watch` flag. Is there any way we can achieve this?

So far we’ve tried creating an aurelia plugin in a folder, “project1”, then copying “project1” to “project2” and changed all the values of the “paths” object in the aurelia.json from “…/src” to “…/…/project2/src”. But I got the following error:

ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of resources:  
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for “resources”  
ERROR [Bundler] Unable to analyze resources  
INFO [Bundler] Error: Unable to find package metadata (package.json) of resources  
ERROR [Bundler] Failed to add Nodejs module resources  
INFO [Bundler] Error: Unable to find package metadata (package.json) of resources

Has anyone tried something similar or know how to achieve this goal?

---

<div class="post-metadata">

**Author:** ![pwoosam](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/pwoosam/32/1692_2.png) [@pwoosam](https://discourse.aurelia.io/u/pwoosam)\
**Post date:** [January 18, 2020, 12:50am UTC](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166/2 "2020-01-18T00:50:30Z")

</div>

I resolved those errors by replacing all references in `aurelia.json` from `../src` to `../../project2/src`.

However the watch command is not completely working. It detects the changes, but does not add the path to `pendingRefreshPaths` in `watch.ts`. Looks like I’ll be making some changes there.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 18, 2020, 3:52am UTC](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166/3 "2020-01-18T03:52:14Z")

</div>

You can have a look at ux, we are doing similar in there. It may or maybe be applicable for your app setup though [https://github.com/aurelia/ux/tree/master/app](https://github.com/aurelia/ux/tree/master/app)

---

<div class="post-metadata">

**Author:** ![pwoosam](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/pwoosam/32/1692_2.png) [@pwoosam](https://discourse.aurelia.io/u/pwoosam)\
**Post date:** [January 20, 2020, 9:31pm UTC](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166/4 "2020-01-20T21:31:56Z")

</div>

That was helpful, but not quite what I’m trying to get setup.

I created a repo to help demonstrate what I’m trying to do.

> **[pwoosam/aurelia-webpack-app-watch-plugin-changes](https://github.com/pwoosam/aurelia-webpack-app-watch-plugin-changes)**
>
> Test project for an aurelia app using webpack, that watches for changes in a plugin from a local directory - pwoosam/aurelia-webpack-app-watch-plugin-changes

Essentially, I’m trying to have two projects: 1 SPA and 1 plugin. I would like to have the SPA use the plugin and watch for changes in the plugin’s src so that as the SPA gets refreshed/updated when the plugin’s source changes.

I made the following changes to try to accomplish this:

> <https://github.com/pwoosam/aurelia-webpack-app-watch-plugin-changes/commit/5a2cafdb3a02d0e866eb856d7b6741f16dcb7107>

I successfully have webpack watching for changes in the plugin’s src directory and refreshing the SPA as needed, but Aurelia does not seem to be able to resolve the plugin’s Module IDs registered in `aurelia-plugin/src/index.ts`

I’m getting a runtime error from aurelia-loader-webpack, saying `Error: "Unable to find module with ID: local-plugin/elements/hello-world"`

If I change `PLATFORM.moduleName('./elements/hello-world')` to `PLATFORM.moduleName('elements/hello-world')` in `aurelia-plugin/src/index.ts` the error seems to go away, but I still cannot use the `hello-world` element. It seems to be that Aurelia is having trouble detecting what type of resource `hello-world` is.

So if I then go into `hello-world.ts` and add `@customElement('hello-world')`, I get another error: `Error: "Cannot determine default view strategy for object."`. And if I then go and add `@useView('./hello-world.html')` I get yet another error: `@useView('./hello-world.html')`.

I’m probably going down the wrong path here, but have no clue where to go from here to get these modules to resolve.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 21, 2020, 11:42am UTC](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166/5 "2020-01-21T11:42:03Z")

</div>

I feel you. It’s a big difficult to setup in that way, as there’s a slight difference in behavior between compile time module resolution & how aurelia loader works at runtime. That’s why I was suggesting you to have a look at the ux repo, as it was done similarly. I was able to get your setup to work, you can have a look here:

> <https://github.com/bigopon/aurelia-webpack-app-watch-plugin-changes/commit/ad04375915917bf7c28d59a6765c94f4935860c8>

2 notes:

- you already aliased `local-plugin`, so there’s no need to add `localPluginDir` to module resolution I think, it may mess webpack module resolution up (and I couldn’t get it to work with this)

```diff
- modules: [srcDir, localPluginDir, 'node_modules'],
+ modules: [srcDir, 'node_modules'],

```

- I think you are right about using `@useView`, it’s the simplest way to get things work with the comnbination of plugin/alias/webpack etc…

Can you give that a try and let me know if it works for you?

---

<div class="post-metadata">

**Author:** ![pwoosam](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/pwoosam/32/1692_2.png) [@pwoosam](https://discourse.aurelia.io/u/pwoosam)\
**Post date:** [January 21, 2020, 5:02pm UTC](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166/6 "2020-01-21T17:02:09Z")

</div>

Thank you, this worked perfectly. This also resolved my issue in [Plugin skeleton with webpack](https://discourse.aurelia.io/t/plugin-skeleton-with-webpack/3167/4) with the aurelia-loader-webpack not being able to resolve relative module names!

The only caveat we have now is needing to use `@useView`, but that’s no real issue for us.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 21, 2020, 8:39pm UTC](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166/7 "2020-01-21T20:39:32Z")

</div>

There is a way to make it work without `@useView` as well, but I was a bit too lazy 😛

---

<div class="post-metadata">

**Author:** ![pwoosam](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/pwoosam/32/1692_2.png) [@pwoosam](https://discourse.aurelia.io/u/pwoosam)\
**Post date:** [January 21, 2020, 9:57pm UTC](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166/8 "2020-01-21T21:57:43Z")

</div>

That would be awesome. It’s always great to trim down on boilerplate. Do you think you can give me a bit of background info or point me in the right direction so I could give it a shot?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 21, 2020, 10:20pm UTC](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166/9 "2020-01-21T22:20:16Z")

</div>

I think theres a way to fo it, though it requires more trials & errors. Thats why im saying lazy. For the direction, im not sure, but it would be similar to how we do it in ux, with rhe link i sent you above

---

<div class="post-metadata">

**Author:** ![pwoosam](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/pwoosam/32/1692_2.png) [@pwoosam](https://discourse.aurelia.io/u/pwoosam)\
**Post date:** [January 22, 2020, 12:30am UTC](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166/10 "2020-01-22T00:30:49Z")

</div>

Ah yes, it looks I would just need to add the .html as a dependency using the ModuleDependenciesPlugin.

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/e/e815428386e7ca2d214e50c70cc05db1f7b467b9.png)

Alternatively I can tell webpack to register it as a dependency by calling `PLATFORM.moduleName()` in the configure method!

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/9/95c3d54c2b527d6f309c89b14ec76b0f7cdad5f6.png)

I think I’ll just write a short utility for this. Thanks again!  
edit: Looks like I can’t write a utility for this because `PLATFORM.moduleName()`needs to have the string in there for static analysis by webpack. I’ll just have to write it out!

---

<div class="post-metadata">

**Author:** ![jded](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jded/32/1814_2.png) [@jded](https://discourse.aurelia.io/u/jded)\
**Post date:** [April 30, 2020, 2:51pm UTC](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166/11 "2020-04-30T14:51:02Z")

</div>

I found a way to resolve html files without hard code all of them. [This answer](https://github.com/aurelia/webpack-plugin/issues/164#issuecomment-520913804) was the reference.  
So, in webpack.config.js, I changed this

```diff
- plugins: [
- new AureliaPlugin(),

```

to this

```diff
+ plugins: [
+ new AureliaPlugin({
+ viewsFor: '{,../my-plugin/src/}**/!(tslib)*.{ts,js}' 
+ }),

```

p.s. I got the default value from [here](https://github.com/aurelia/webpack-plugin/blob/9f6f7983312c66f857e79b744e4ec257cc287b8b/src/AureliaPlugin.ts#L63) and changed it accordingly.

---

<div class="post-metadata">

**Author:** ![jded](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jded/32/1814_2.png) [@jded](https://discourse.aurelia.io/u/jded)\
**Post date:** [April 30, 2020, 2:59pm UTC](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166/12 "2020-04-30T14:59:52Z")

</div>

> [@bigopon](#):
>
> ```diff
> - modules: [srcDir, localPluginDir, 'node_modules'],
> + modules: [srcDir, 'node_modules'],
> 
> ```

I think if you change the following, you can also get rid of all aurelia aliases in webpack.config.js too

```diff
- modules: [srcDir, 'node_modules'],
+ modules: [srcDir, path.resolve(__dirname, 'node_modules')],

```

---

<div class="post-metadata">

**Author:** ![timfish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/timfish/32/1566_2.png) [@timfish](https://discourse.aurelia.io/u/timfish)\
**Post date:** [April 30, 2020, 7:03pm UTC](https://discourse.aurelia.io/t/possible-to-change-a-plugins-source-and-watch-changes-in-the-consuming-application/3166/13 "2020-04-30T19:03:34Z")

</div>

It’s worth noting the Webpack docs for `modules` which say that it treats absolute and relative module paths differently.

> **[Resolve | webpack](https://webpack.js.org/configuration/resolve/#resolvemodules)**
>
> webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

If you pass `node_modules` as a string it will continue resolving up through directories using standard node resolution. If you pass an absolute path to `node_modules` it will not traverse up and resolve other `node_modules` directories.

You want the traversal to occur if you’re loading packages in local directories that also have their own `node_modules` directory.