Working With Linked Node Modules & Webpack In Aurelia

Last updated: February 23, 2018

When you are building an Aurelia plugin and you want to test it, you will want to use npm link or yarn link to create a local symbolic link to your module and then use it in a test application.

If you are working with Aurelia and Webpack, then you’ve probably run into an issue with linked Node modules can’t resolve files correctly. You might have some code in your plugin that looks like this in an index.js / index.ts.

export function configure(config) {
  if (config.globalResources) {
    config.globalResources([
        PLATFORM.moduleName("./my-plugin-file"),
        PLATFORM.moduleName("./another-plugin-file"),
        PLATFORM.moduleName("./some-file")
    ])
  }
}

To get Aurelia and Webpack working with symbolically linked modules, you need to set the NODE_PRESERVE_SYMLINKS environment variable. Regardless of whether or not you are on a Unix based OS like Linux or macOS, or Windows.

But if you link your built module on your local machine, then you’ll encounter an error that like this: Unhandled rejection Error: Error invoking SVGAnalyzer. Check the inner error for details. Message: WEBPACK_IMPORTED_MODULE_1_aurelia_pal.b.createElement is not a function

This error will only show up for locally linked Aurelia plugins. If you were to actually publish this to Npm where the node_modules directory wouldn’t be around, there wouldn’t be a problem.

You will probably try everything to fix it, you’ll start playing around with modules in your plugin and app. But the problem isn’t your plugin or your app, it’s the node_modules directory in your linked plugin.

It took me a long time to actually work out what was going on. As a short-term fix, I build the plugin and then I go into the linked packages node_modules directory and delete all of the Aurelia dependency folders.

I know it’s not ideal, but it fixes the issue. For some reason, Webpack will parse your node_modules directory in your linked package as well as the node_modules directory in the root of your application.

 

Dwayne

 

One thought on “Working With Linked Node Modules & Webpack In Aurelia

  1. Thanks for this post, was definitely helpful!

    I had the same issue where I needed to delete my node_modules folder in the linked package. I was able to fix this with a change to my webpack config. Previously in the resolve.modules section I was passing in just a string value of ‘node_modules’. I updated it to use “path.resolve(__dirname, ‘node_modules’)” which fixed the issue for me.

    Ex:

    resolve: {
    modules: [
    path.resolve(__dirname, ‘src’),
    path.resolve(__dirname, ‘node_modules’)
    ]
    }

    Hope this helps!

Leave a Reply

Your email address will not be published. Required fields are marked *