search

dai-shi / waku

⛩️ The minimal React framework
https://waku.gg
MIT License
4.08k stars 108 forks source link

Can't run a Waku 0.17.0 application on Windows 11 with Node v20.9.0 #172

Closed mauricedb closed 6 months ago

mauricedb commented 6 months ago

Step taken:

Setting up project was fine

PS C:\Temp> npm create waku@latest
√ Project Name ... waku-project
√ Choose a starter template » async-template
Setting up project...

Done. Now run:

cd waku-project
npm install
npm run dev

Next cd into project and try to start the development server with npm run dev

Resulting console output when opening http://localhost:3000/ in the browser:

PS C:\Temp\waku-project> npm run dev

> waku-project@0.0.0 dev
> waku dev --with-ssr

ready: Listening on http://localhost:3000/
You did not run Node.js with the `--conditions react-server` flag. Any "react-server" override will only work with ESM imports.
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:406:5)
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:216:11)
    at defaultLoad (node:internal/modules/esm/load:118:3)
    at ModuleLoader.load (node:internal/modules/esm/loader:396:13)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:278:56)
    at new ModuleJob (node:internal/modules/esm/module_job:65:26)
    at #createModuleJob (node:internal/modules/esm/loader:290:17)
    at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:248:34)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:229:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:315:23)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}
Error: The destination stream errored while writing data.
    at Transform.<anonymous> (C:\Temp\waku-project\node_modules\react-dom\cjs\react-dom-server.node.development.js:11660:20)
    at Transform.emit (node:events:514:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

Environment:

PS C:\Temp\waku-project> node -v
v20.9.0
PS C:\Temp\waku-project> npm -v
10.2.4
PS C:\Temp\waku-project> systeminfo

Host Name:                 DESKTOP-GVQ1HCA
OS Name:                   Microsoft Windows 11 Pro
OS Version:                10.0.22621 N/A Build 22621
OS Manufacturer:           Microsoft Corporation
OS Configuration:          Standalone Workstation
OS Build Type:             Multiprocessor Free
Registered Owner:          maurice.de.beijer@gmail.com
Registered Organization:   N/A
Product ID:                00330-80137-56147-AA921
Original Install Date:     12-4-2023, 21:01:18
System Boot Time:          16-11-2023, 10:35:56
System Manufacturer:       MEDION
System Model:              X87047
System Type:               x64-based PC
Processor(s):              1 Processor(s) Installed.
                           [01]: Intel64 Family 6 Model 158 Stepping 13 GenuineIntel ~3000 Mhz
BIOS Version:              American Megatrends Inc. 360H4W0X.115, 17-6-2019
Windows Directory:         C:\WINDOWS
System Directory:          C:\WINDOWS\system32
Boot Device:               \Device\HarddiskVolume3
System Locale:             en-gb;English (United Kingdom)
Input Locale:              en-us;English (United States)
Time Zone:                 (UTC+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna
Total Physical Memory:     16.308 MB
Available Physical Memory: 6.170 MB
Virtual Memory: Max Size:  22.196 MB
Virtual Memory: Available: 6.639 MB
Virtual Memory: In Use:    15.557 MB
Page File Location(s):     C:\pagefile.sys
Domain:                    WORKGROUP
Logon Server:              \\DESKTOP-GVQ1HCA
Hotfix(s):                 4 Hotfix(s) Installed.
                           [01]: KB5032007
                           [02]: KB5012170
                           [03]: KB5032190
                           [04]: KB5032393
Network Card(s):           2 NIC(s) Installed.
                           [01]: TAP-Windows Adapter V9
                                 Connection Name: Ethernet 2
                                 Status:          Media disconnected
                           [02]: Realtek PCIe GbE Family Controller
                                 Connection Name: Ethernet
                                 DHCP Enabled:    Yes
                                 DHCP Server:     192.168.178.1
                                 IP address(es)
                                 [01]: 192.168.178.222
                                 [02]: fe80::cb6:d9e2:cc42:e3fd
                                 [03]: 2001:1c00:201b:a900:b9fa:ba9:eb8b:9d39
                                 [04]: 2001:1c00:201b:a900:ebb6:8f1a:d197:dcd7
Hyper-V Requirements:      A hypervisor has been detected. Features required for Hyper-V will not be displayed.
himself65 commented 6 months ago

Seems like SSR feature cause this bug

himself65 commented 6 months ago

error from here, seems like https://github.com/dai-shi/waku/blob/85e9c46148dca55f76ebef00724954a61a73562e/packages/waku/src/lib/middleware/rsc/ssr.ts#L349-L362

himself65 commented 6 months ago

This might be a React issue. I'm trying to give it an implement mini minimum reproduction.

dai-shi commented 6 months ago

Seems like SSR feature cause this bug

Please try removing --with-ssr to see how it changes.

mauricedb commented 6 months ago

When I start the dev server using npx waku dev there is no error and the app starts just fine.

With npx waku build there is still an error: You did not run Node.js with the--conditions react-serverflag. Any "react-server" override will only work with ESM imports.

Complete output:

PS C:\Temp\waku-project> npx waku build
vite v4.5.0 building SSR bundle for production...
✓ 33 modules transformed.
✓ built in 624ms
vite v4.5.0 building SSR bundle for production...
✓ 6 modules transformed.
dist/assets/waku-client.js      0.23 kB
dist/assets/rsc1-ca17757ec.js   0.57 kB
dist/assets/App-fb1b7d37.js     0.81 kB
dist/entries.js                 1.14 kB
dist/assets/rsc0-7d99752b9.js  11.43 kB
✓ built in 89ms
vite v4.5.0 building for production...
✓ 38 modules transformed.
../dist/public/index.html                        1.41 kB │ gzip:  0.63 kB
../dist/public/assets/rsc0-7d99752b9.js          0.19 kB │ gzip:  0.16 kB
../dist/public/assets/waku-client.js             0.19 kB │ gzip:  0.16 kB
../dist/public/assets/rsc1-ca17757ec.js          0.39 kB │ gzip:  0.28 kB
../dist/public/assets/jsx-runtime-d5aecd7e.js    0.67 kB │ gzip:  0.43 kB
../dist/public/assets/main-173a10a9.js           1.09 kB │ gzip:  0.61 kB
../dist/public/assets/index-6fca7d3f.js          7.37 kB │ gzip:  2.85 kB
../dist/public/assets/client-01c116b8.js       193.38 kB │ gzip: 60.92 kB
✓ built in 680ms
You did not run Node.js with the `--conditions react-server` flag. Any "react-server" override will only work with ESM imports.
node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<Object>".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v20.9.0
PS C:\Temp\waku-project>
himself65 commented 6 months ago

Seems like SSR feature cause this bug

Please try removing --with-ssr to see how it changes.

I debug the code for few hours. The main reason is path.join will cause c://path/to/file and used by import(specifier) in React

himself65 commented 6 months ago

There are many usage of path.join and other similar codes. I think I need few days to correct the code

dai-shi commented 6 months ago

After finishing #165, my plan is to reduce Node specific code in our code, and maybe create a DI-able function. (Handling "react-server" and Vite still depend on Node.) That will take months, so just saying for now.

himself65 commented 6 months ago

After finishing #165, my plan is to reduce Node specific code in our code, and maybe create a DI-able function. (Handling "react-server" and Vite still depend on Node.) That will take months, so just saying for now.

This is a nice idea. If so, I think the better way is to support prod in some other environment (deno, bun, cloudflare workers) firstly. So that

dai-shi commented 6 months ago

to support prod in some other environment

Yes, that's the goal, but impossible at the moment anyway because we use --conditions react-server with new Worker(). Do you know if other environment supports it? cc @gregberge also has interests in it.

himself65 commented 6 months ago

If we can bundle all packages into one file or files that acceptable by other environments

dai-shi commented 6 months ago

I think it already does that in terms of bundling.