Webpack 5 + yarn 3 workspaces + typescript

Help Requests
1

I am finally attempting to update my projects to some of the later versions of tools. I thought I had this working, but sure enough there are hiccups.

In the current state of this repo, GitHub - elitemike/aurelia-test-app I can’t import a plugin.
Commenting out aurelia.use.plugin(PLATFORM.moduleName('@packages/dep1')); on the test-app’s main.ts will allow the application to work

I believe the project structure is setup correct, but I’m sure it’s a webpack issue where it isn’t resolving the module correctly.

I also can’t get vs code debugging to work. PLEASE HELP

2

You may need to create an alias in the webpack config

3

Update, it works! I had to set esModule: false on the HTML loader

Now i need to figure out why my command runners don’t want to work to watch the package changes

I had a mistake where I wasn’t actually importing the view on the viewmodel class inline. That causes the site to get further. What I’m running into now seems like a bundling issue for sure.

Uncaught (in promise) Error: Template markup must be wrapped in a <template> element e.g. <template> <!-- markup here --> </template>

If I set a breakpoint on this function in aurelia-pal-browser, I can see that the markup is the module with the template residing on the ‘default’ property.

 createTemplateFromMarkup: function createTemplateFromMarkup(markup) {
    var parser = document.createElement('div');
    parser.innerHTML = markup;

    var temp = parser.firstElementChild;
    if (!temp || temp.nodeName !== 'TEMPLATE') {
      throw new Error('Template markup must be wrapped in a <template> element e.g. <template> <!-- markup here --> </template>');
    }

    return _FEATURE.ensureHTMLTemplateElement(temp);
  }

I have a working sample setup using Dumber, I’m just not sure if I want to spend the time to fix my production code. I may not have a choice