• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Working With Linked Node Modules & Webpack In Aurelia

Aurelia 1 · 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

Leave a Reply Cancel reply

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ivan
Ivan
4 years ago

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!

0

Primary Sidebar

Popular

  • The Quad Cortex Desktop Editor is Finally Announced
  • Thoughts on the Flipper Zero
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • Smoke Detector Randomly Goes Off Early Hours of The Morning

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz