Can't run site in development mode

[KiritaniAyaka]

The site can't run on my local machine. All things I do:

1. Clone this repo
2. Run npm i and npm run dev
3. Open localhost:8080

Then I got an error in the console as follows image and no contents rendered:

But it looks like the build output works fine, there are no error throws during building at least.

My Node.js version is 18.19.1

[rschristian]

Strange, what browser are you using?

I'm aware of an issue with our logo component, but I haven't had any issue w/ running the site at all.

Edit: After taking a look, I'm not quite sure why I'm not seeing an error. Something's weird.

Edit 2: I saw a type issue with that component but had just ignored it as it wasn't actively an issue. If you wanted to correct that and submit a PR (assuming that's the only place of issue), I'd be happy to get that in. Really weird how I haven't seen that on FF or Chrome (am on Linux). Not quite sure what difference OS would make though.

[KiritaniAyaka]

I'm using Chrome 124.0.6367.119 on Windows 11

---

I tried to fix this locally by changing two lines that have type issues to:

onMouseOver={!touch ? this.hover : undefined}
onMouseOut={!touch ? this.hoverOut : undefined}

Now the index page can be rendered but there are some other errors.

When the browser requests http://localhost:8080/.netlify/functions/release?repo=preact, Vite crashes:

node:internal/errors:496
    ErrorCaptureStackTrace(err);
    ^

Error: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
    at new NodeError (node:internal/errors:405:5)
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:149:11)
    at defaultLoad (node:internal/modules/esm/load:99:3)
    at ModuleLoader.load (node:internal/modules/esm/loader:416:13)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:287:22)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at #createModuleJob (node:internal/modules/esm/loader:311:17)
    at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:264:34)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:250:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:335:23) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}

Node.js v18.19.1

I'm aware that 'c:' is the drive letter of Windows. So I tried running the site on my Fedora virtual machine and visited it on Windows, and everything worked fine.

So there is a compatibility issue for Windows except the type issue mentioned above. But I have no clue how to fix the compatibility issue.

[rschristian]

When the browser requests http://localhost:8080/.netlify/functions/release?repo=preact, Vite crashes:

Crap, that'd be the Netlify middleware. Not quite sure what the pattern is on Windows, but those path.join() calls are probably the issue.

Thanks for looking into this, I really appreciate it.

So I tried running the site on my Fedora virtual machine and visited it on Windows, and everything worked fine.

Just out of curiosity, did everything work fine without the patch to onMouseover etc.? As far as I can tell, that thrown error you're seeing is the correct behavior, and the bug is that it doesn't seem to happen on Linux/my setup (no idea if other contributors have ran into it or not). It seems really weird that I haven't seen it, so we might have a separate bug in preact/debug.

I haven't been able to look into it yet, so just want to check if you're still seeing that on your VM.

[rschristian]

I'm using Chrome 124.0.6367.119 on Windows 11

Oh, we check touchpoints for the logo to detect mobile. That makes sense why I didn't see anything (typical desktop for me).

We should be able to get rid of touch altogether and just do this:

onMouseOver={this.hover}
onMouseOut={this.hoverOut}

Not quite sure why this was done to begin with.

[KiritaniAyaka]

Just out of curiosity, did everything work fine without the patch to onMouseover etc.?

Without any patch, the type error is still thrown. Even though it runs on Linux.

[KiritaniAyaka]

Crap, that'd be the Netlify middleware. Not quite sure what the pattern is on Windows, but those path.join() calls are probably the issue.

Thanks for this information I solved it quickly. Just add a file:// before the file path works fine on Windows and Linux.

[rschristian]

Looks like we'll want url.pathToFileURL.

If you're willing to submit a PR I'll get that right in, else, I should be able to land this in the next day or so when I have a free moment.

Edit: Sorry that this was a pain, I'll look into finding a way to detect these Windows/unix compatibility issues better. Don't want contributors to have to deal with this.