Npm link with au plugin

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 isn’t working right. Has anyone done this before?

Webpack throws an error: https://pastebin.com/c5a1Mmw6

1 Like

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

1 Like

Perhaps you’re missing this bit of webpack configuration?

symlinks

1 Like

@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

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

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

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

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

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

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

How do I use cli-bundler?

1 Like

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

1 Like

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

@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.

1 Like

That indeed worked like a charm. Thanks!

1 Like