# Npm link with au plugin

**URL:** <https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838>\
**Category:** Help Requests\
**Created:** [August 14, 2019, 8:44pm UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838 "2019-08-14T20:44:50Z")\
**Posts on this page:** 16\
**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:** [August 14, 2019, 8:44pm UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/1 "2019-08-14T20:44:50Z")

</div>

Working on a project where I’m consuming an Aurelia plugin. Everything works great if it’s installed from npm, but trying to get it working with npm link isn’t working right. Has anyone done this before?

Webpack throws an error: [https://pastebin.com/c5a1Mmw6](https://pastebin.com/c5a1Mmw6)

---

<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:** [August 14, 2019, 9:56pm UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/2 "2019-08-14T21:56:31Z")

</div>

Show me your source code around `PLATFORM.moduleName('./v-td-image.css')`.

---

<div class="post-metadata">

**Author:** ![mcorven](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@mcorven](https://discourse.aurelia.io/u/mcorven)\
**Post date:** [August 15, 2019, 12:39am UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/3 "2019-08-15T00:39:42Z")

</div>

Perhaps you’re missing this bit of webpack configuration?

`symlinks`

> **[Resolve | webpack](https://webpack.js.org/configuration/resolve/#resolvesymlinks)**
>
> 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.

---

<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:** [August 15, 2019, 4:15pm UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/4 "2019-08-15T16:15:05Z")

</div>

@huochunpeng just doing this in the View:

```
<require from="./v-td-image.css"></require>

```

@mcorven When I set that to false, I get a runtime error: [https://pastebin.com/raw/U66PkTV8](https://pastebin.com/raw/U66PkTV8)

---

<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:** [August 15, 2019, 9:36pm UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/5 "2019-08-15T21:36:43Z")

</div>

> [@m0ngr31](#):
>
> Everything works great if it’s installed from npm

You have to tell more on how you consume the plugin. I assume `<require from="./v-td-image.css"></require>` is a line in your plugin repo, not app repo.

One thing you can try is to use alias in webpack.config.js.

```auto
resolve: {
  alias: {
    'your-plugin-name': path.resolve(__dirname, '../local-plugin-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:** [August 16, 2019, 2:57am UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/6 "2019-08-16T02:57:57Z")

</div>

Just consuming it like a regular plugin. Installing it from npm, adding it as a global resource, and importing in functions as needed.

Yes, I’m importing that css file inside the plugin. I probably have a couple hundred css files imported that way.

---

<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:** [August 16, 2019, 4:52am UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/7 "2019-08-16T04:52:18Z")

</div>

> [@m0ngr31](#):
>
> Just consuming it like a regular plugin. Installing it from npm, adding it as a global resource, and importing in functions as needed.

I am confused, your description does not tell me what’s the difference from “Everything works great if it’s installed from npm”.

---

<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:** [August 16, 2019, 6:38am UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/8 "2019-08-16T06:38:31Z")

</div>

If I install it from npm (either from the git repo or with npm pack), webpack builds fine and I can consume the plugin perfectly fine.

If I try to use npm link then the webpack build fails.

---

<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:** [August 16, 2019, 7:17am UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/9 "2019-08-16T07:17:00Z")

</div>

Sounds like something can be improved. I will get back to you.

At mean time, if you use cli-bundler on new app, it should work with npm linked local plugin.

Update: I confirmed cli-bundler app works with npm link.

---

<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:** [August 16, 2019, 10:34am UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/10 "2019-08-16T10:34:41Z")

</div>

Update: our webpack-plugin made an assumption that all npm package root folder is behind node\_modules (either local, deep local, or upper folder hoisting like lerna workspace). But linked npm package doesn’t have node\_modules in their real path (behind the symlink `node_modules/linked-plugin/`).

I am not familiar with webpack architecture to fix this issue. I don’t even know whether it’s possible. cc @jods4

> <https://github.com/aurelia/webpack-plugin/blob/9f6f7983312c66f857e79b744e4ec257cc287b8b/src/PreserveModuleNamePlugin.ts#L120>

> <https://github.com/aurelia/webpack-plugin/blob/9f6f7983312c66f857e79b744e4ec257cc287b8b/src/PreserveModuleNamePlugin.ts#L138>

---

<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:** [August 16, 2019, 3:22pm UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/11 "2019-08-16T15:22:31Z")

</div>

How do I use cli-bundler?

---

<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:** [August 16, 2019, 7:41pm UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/12 "2019-08-16T19:41:37Z")

</div>

When do au new, select last option “custom”, then select cli bundler.

---

<div class="post-metadata">

**Author:** ![avaisane](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/avaisane/32/1459_2.png) [@avaisane](https://discourse.aurelia.io/u/avaisane)\
**Post date:** [August 20, 2019, 10:04am UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/13 "2019-08-20T10:04:52Z")

</div>

Also when adding plugin (helloworld by au-cli) using yarn add …/…/helloworld, webpack bundled (au-cli default) can’t consume plugin. au build seems to build & bundle fine, but when checking bundles {consumingapp}/nodemodules/helloworld/node\_modules folder get’s appended . If I delete {consumingapp}/nodemodules/helloworld/node\_modules folder, then bundling goes fine and plugin is usable. Any idea how to make local plugin development work with yarn and webpack consuming app? After all, these are generated using au-cli defaults.

---

<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:** [August 20, 2019, 11:21am UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/14 "2019-08-20T11:21:31Z")

</div>

@avaisane try to change your webpack config from

```auto
resolve: { 
  modules: [srcDir, 'node_modules'],

```

To

```auto
resolve: { 
  modules: [srcDir, path.resolve(__dirname, 'node_modules')],

```

This enforces webpack to only use top level npm packages, not those deep ones.

---

<div class="post-metadata">

**Author:** ![avaisane](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/avaisane/32/1459_2.png) [@avaisane](https://discourse.aurelia.io/u/avaisane)\
**Post date:** [August 20, 2019, 12:52pm UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/16 "2019-08-20T12:52:48Z")

</div>

That indeed worked like a charm. Thanks!

---

<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:** [October 31, 2019, 3:57pm UTC](https://discourse.aurelia.io/t/npm-link-with-au-plugin/2838/17 "2019-10-31T15:57:35Z")

</div>

Making my resolve look like this solved the issue for me:

```
resolve: {
    ...
    modules: [srcDir, path.resolve(__dirname, 'node_modules')],
    symlinks: false,
},
```