Basic installation not working

I am following the Pages installation steps as described in the official documentation here: {NO_LINK_ALLOWED_REDACTED}

I am setting up a simple React App project with the wrangler tool and I get errors without me doing anything to the project files. This means even the basic setup is faulty.

What can I do to get at least a simple React App project setup without errors?

Here is my output:

aschmid@pve-dev:~/cloudflare$ npm create cloudflare@latest

using create-cloudflare version 2.6.1

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./cf-react-app
│
├ What type of application do you want to create?
│ type Website or web app
│
├ Which development framework do you want to use?
│ framework React
│
╰ Continue with React via `npx [email protected] cf-react-app`


Creating a new React app in /home/aschmid/cloudflare/cf-react-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1459 packages in 40s

242 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 69 packages, and changed 1 package in 7s

246 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1528 packages in 2s

246 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created cf-react-app at /home/aschmid/cloudflare/cf-react-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd cf-react-app
  npm start

Happy hacking!

╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers
│ installed via `npm install wrangler --save-dev`
│
├ Retrieving current workerd compatibility date
│ compatibility date 2023-10-16
│
├ Adding command scripts for development and deployment
│ added commands to `package.json`
│
├ Committing new files
│ git commit
│
╰ Application configured

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `npm run pages:deploy`
│
├  APPLICATION CREATED  Deploy your application with npm run pages:deploy
│
│ Navigate to the new directory cd cf-react-app
│ Run the development server npm run pages:dev
│ Deploy your application npm run pages:deploy
│ Read the documentation {NO_LINK_ALLOWED_REDACTED}
│ Stuck? Join us at {NO_LINK_ALLOWED_REDACTED}
│
╰ See you again soon!
aschmid@pve-dev:~/cloudflare$ cd cf-react-app/
aschmid@pve-dev:~/cloudflare/cf-react-app$ npm run pages:dev

> [email protected] pages:dev
> wrangler pages dev --compatibility-date=2023-10-16 --port 3000 -- npm start

Running npm start...
Sleeping 5 seconds to allow proxy process to start before attempting to automatically determine port...
To skip, specify the proxy port with --proxy.
[proxy]:
> [email protected] start
> react-scripts start


✘ [ERROR] [proxy]: (node:324040) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

  (Use `node --trace-deprecation ...` to show where the warning was created)



✘ [ERROR] [proxy]: (node:324040) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.




[proxy]: Starting the development server...


Automatically determined the proxy port to be 3000.
No functions. Shimming...
✘ [ERROR] [proxy]: One of your dependencies, babel-preset-react-app, is importing the

  "@babel/plugin-proposal-private-property-in-object" package without
  declaring it in its dependencies. This is currently working because
  "@babel/plugin-proposal-private-property-in-object" is already in your
  node_modules folder for unrelated reasons, but it may break at any time.

  babel-preset-react-app is part of the create-react-app project, which
  is not maintianed anymore. It is thus unlikely that this bug will
  ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
  your devDependencies to work around this error. This will make this message
  go away.




 ⛅️ wrangler 3.14.0
-------------------
▲ [WARNING] --local is no longer required and will be removed in a future version.

  `wrangler dev` now uses the local Cloudflare Workers runtime by default. 🎉


[proxy]: Compiled successfully!

You can now view cf-react-app in the browser.

  Local:            {NO_LINK_ALLOWED_REDACTED}
  On Your Network: {NO_LINK_ALLOWED_REDACTED}

Note that the development build is not optimized.
To create a production build, use npm run build.


[proxy]: webpack compiled successfully

⎔ Starting local server...
workerd/util/symbolizer.c++:98: warning: Not symbolizing stack traces because $LLVM_SYMBOLIZER is not set. To symbolize stack traces, set $LLVM_SYMBOLIZER to the location of the llvm-symbolizer binary. When running tests under bazel, use `--test_env=LLVM_SYMBOLIZER=<path>`.
*** Fatal uncaught kj::Exception: kj/async-io-unix.c++:945: failed: ::bind(sockfd, &addr.generic, addrlen): Address already in use; toString() = 0.0.0.0:3000
stack: /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@39dffda /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@39dfd7f /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@39ddfe5 /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@18b9766 /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@18b9df9 /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@18ba514 /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@1862ecd /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@18672a7 /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@1867024 /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@186700c /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@3a17d2e /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@3a1792d /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@3a15c68 /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@3a15a2a /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@1858299 /lib/x86_64-linux-gnu/libc.so.6@29d8f /lib/x86_64-linux-gnu/libc.so.6@29e3f /home/aschmid/cloudflare/cf-react-app/node_modules/@cloudflare/workerd-linux-64/bin/workerd@185802d
✘ [ERROR] MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.

After a bit more investigation I think this line is package.json is just wrong:

"pages:dev": "wrangler pages dev --compatibility-date=2023-10-19 --port 3000 -- npm start",

This causes the error because npm start will start a server listening on port 3000 so when wrangler also wants to listen on port 300 this happens:

failed: ::bind(sockfd, &addr.generic, addrlen): Address already in use; toString() = 0.0.0.0:3000

So logically wranger must use another port or some sort of proxy?

I tried changing it to this:

"pages:dev": "wrangler pages dev --compatibility-date=2023-10-19 --proxy 3000 -- npm start",

The --proxy 3000 avoids the error and wrangler listens on port 8788. Not sure if this is going to work.

Another side effect is that if you stop the “Wrangler server” with “X” the “npm start” server keeps running on port 3000 until you kill it manually.

Has anybody figured out how to setup Wrangler with Pages correctly?