Npm link with au plugin

Help Requests
1

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

1 Like
2

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

1 Like
3

Perhaps you’re missing this bit of webpack configuration?

symlinks

1 Like
4

@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

1 Like
5

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.

resolve: {
  alias: {
    'your-plugin-name': path.resolve(__dirname, '../local-plugin-repo/')
  }
}
1 Like
6

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.

1 Like
7

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

1 Like
8

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.

1 Like
9

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.

1 Like
10

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

1 Like
11

How do I use cli-bundler?

1 Like
12

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

1 Like
13

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.

1 Like
14

@avaisane try to change your webpack config from

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

To

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

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

2 Likes
16

That indeed worked like a charm. Thanks!

1 Like
17

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

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