"Default TypeScript Aurelia 2 App" template broken - `host` undefined

Help Requests
1

Hi guys,

I have just tried to create new Aurelia 2 app with npx makes aurelia, choosing:

Default TypeScript Aurelia 2 App

After running:

npm install
npm start

Aurelia 2 application brakes in the browser with following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at aurelia.js?v=d61b605d:16628:14
    at onResolve (aurelia.js?v=d61b605d:433:10)
    at new AppRoot (aurelia.js?v=d61b605d:16626:28)
    at _Aurelia.app (aurelia.js?v=d61b605d:16754:17)
    at _Aurelia.app (aurelia.js?v=d61b605d:20435:18)
    at _Aurelia.app (aurelia.js?v=d61b605d:20415:27)
    at main.ts:5:4

Line that breaks is:

host.addEventListener("submit", (e) => {
          const target = e.target;
          const noAction = !target.getAttribute("action");
          if (target.tagName === "FORM" && noAction) {
            e.preventDefault();
          }
        }, false);

because host is undefined. This line is part of AppRoot class and it’s constructor.

What am I missing here? How do I fix this error?

1 Like
2

What operating system are you seeing this happen on? I just tested on macOS and it worked for me.

1 Like
3

Hi,

I tried to Windows 11 and on latest Chrome browser (138). Node v22.17.0 (LTS) and npm v11.4.2.
Altough, I don’t see how this can be connected to OS, because it seems that build finishes without any error.

The error I posted is from browser, when I open the main url. I get only a completely blank page and error in browser’s console.

Update I tried on Windows 10 machine (same version of Chrome, Node and npm) and the project starts in browser (“Hello World” stripe on top). So it is broken on Windows 11. Interesting.

4

Just asking about the operating system as the way dependencies are installed via Npm differs to macos (some packages get built).

That’s really quite bizarre the operating system difference but same setup caused issue. I’ll look into this on my Windows machine too.

1 Like
5

@dwaynecharrington Was there any progress on this issue? I have just tried to run:

npx makes aurelia new-project-name --here -s sass,vitest,playwright,app-with-router

…downloading Aurelia 2 RC1, and I am getting exactly the same issue like a year ago:

app-root.ts:103 Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at app-root.ts:103:14
    at onResolve (functions.ts:433:10)
    at new AppRoot (app-root.ts:101:28)
    at _Aurelia.app (aurelia.ts:63:17)
    at _Aurelia.app (index.ts:50:18)
    at main.ts:10:4

Is there any plan to fix this? I am sure this kind of issues, where you get error as soon as you start the app will drive bunch of people away from Aurelia (like it did with v1 at the time).

6

@dwaynecharrington The culprit on Windows 11 is drive latter missmatch in paths of components. For example: C:\…\my-app.ts vs c:\…\my-app.ts, thus this line produces wrong result:

The workaround would be to add this on top of the file:

const __auCwdDrive = process.platform === 'win32' ? process.cwd()[0] : '';
  const __auNormalizeId = (id) =>
    process.platform === 'win32'
      && /^[a-zA-Z]:/.test(id)
      && id[0] !== __auCwdDrive
        ? __auCwdDrive + id.slice(1)
        : id;

and to modify filter statement, so that drive letter missmatch is fixed.

if (!filter(__auNormalizeId(id))) return;

Perhaps there can be better workaround. But this is for illustration.

Suspected culprit is fs.realpathSync.native() called by Vite to resolve paths, best described in this issue (even though it’s marked as a duplicate): Vite resolves realpath on Windows when using subst drive, causing asset emission failure in Rollup · Issue #20420 · vitejs/vite · GitHub

1 Like
7

Do we know in which situation the issue happens, at least based on your local setup?

1 Like
8

Now that I figured what the problem is, it’s pretty basic. I create new project with npx makes aurelia and simply run npm run start.

If I start it from standard console, it fails:

d:\dev\au2-rc1-test>npm run start

If I start it from PowerShell, it works:

PS D:\dev\au2-rc1-test> npm run start

The main difference is that letter d:\ and D:\, this is breaking the plugin. But the core issue is somewhere in Vite itself, as far as I can tell.

Btw, I see that you already made the fix in master. Do I have to wait for new version of npm package published, before I test the fix?

9

Probably after we get the vite 8 support work in, we can do a dev release, I’m not sure yet.

The main difference is that letter d:\ and D:\, this is breaking the plugin. But the core issue is somewhere in Vite itself, as far as I can tell.
Btw, I see that you already made the fix in master. Do I have to wait for new version of npm package published, before I test the fix?

It’s a simple fix, and only for win32 platform, so we kind of ok, at least in my local (but I didn’t have any issues in the first place).

10

@bigopon No stress for publishing the package. I’ll just make sure I use PowerShell with capital drive letter for the timebeing.

I’ve tested now again, since you mentioned you have no issue on Windows 11. When I start Console app from start menu, it indeed shows capital drive letters. It turned out that small latter creeps in when I start Console (cmd) in a project folder from Total Commander. However, if I do exactly the same on Windows 10, instantiate console with small drive letter in an Aurelia v2 project folder, npm run start works perfectly fine - Vite is happy.

This is clearly an edge case, but I think it’s good that building pipeline is resistant to this issue.