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