Convert ReactJS-Project to Android-App with ionic capacitor throws Error on WSL

Issue

I am currently working on a relative simple Web-App and I decided to use ReactJS as a Framework.
I created a simple demo Project with create-react-app to get started.
I am working on a Windows 10 system with the Linux Subsystem.

Now I got tasked to make the Website as an Android and later iOs App accessible.

The webpage should still be accessible via a browser, so I was thinking I stick with React and build the weppage responsive so on each device the same same Functionality is given.

I looked at ways to convert a React Project to a "Native"/Hybrid App and stumbled upon Cordova and Ionic.

I tried following the steps in this article Convert your existing react js app to android or ios app using the ionic capacitor
I got Android Studio installed on WSL by using a XServer for GUI-Applications.

Now when I try to add Android to my Project by using ionic capacitor add android --verbose I get the following error:

 ionic:lib Terminal info: { ci: false, shell: '/bin/bash', 

tty: true, windows: false } +0ms
  ionic:lib CLI global options: { _: [ 'capacitor', 'add', 'android' ], help: null, h: null, verbose: true, quiet: null, interactive: true, color: true, confirm: null, json: null, project: null, '--': [] } +5ms
  ionic:lib:project Project type from config: @ionic/react (react) +0ms
  ionic:lib:project Project details: { context: 'app', type: 'react', errors: [], configPath: '/mnt/d/ews/ReactWS/pacFrontend/ionic.config.json' } +1ms
  ionic Context: { binPath: '/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/bin/ionic', libPath: '/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli', execPath: '/mnt/d/ews/ReactWS/pacFrontend', version: '6.12.1' } +0ms
> capacitor add android
  ionic:lib:telemetry Sending telemetry for command: 'ionic capacitor add' [ 'android', '--verbose', '--interactive', '--color' ] +0ms
Error

at new SubprocessError
(/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/node_modules/@ionic/utils-subprocess/dist/index.js:41:23)
at ChildProcess.<anonymous>
(/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/node_modules/@ionic/utils-subprocess/dist/index.js:114:27)
at ChildProcess.emit (events.js:315:20)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
  ionic Error
  ionic     at new SubprocessError (/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/node_modules/@ionic/utils-subprocess/dist/index.js:41:23)
  ionic     at ChildProcess.<anonymous> (/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli/node_modules/@ionic/utils-subprocess/dist/index.js:114:27)
  ionic     at ChildProcess.emit (events.js:315:20)
  ionic     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
  ionic     at onErrorNT (internal/child_process.js:465:16)
  ionic     at processTicksAndRejections (internal/process/task_queues.js:80:21) +126ms

Now I couldn't find a solution via Google - Is this a Problem/Bug with ionic/Capacitor or with WSL.

Every Help is Apreciated

Solution

So I managed to fix my Problem, or at least get my React Webapp working as an Android-App.

I uninstalld ionic, capacitor and everything else and deleted my node_modules to make a fresh npm install
I proceded to

npm install @capacitor/core @capacitor/cli

and initated capacitor with

npx cap init 
npx cap add android

Now I build the webpage by using

npm run build  

To create the Android App i use

npx cap copy
npx cap copy android

Then I can open the generated android folder in Android Studio and test the App with an Emulator

Answered By - KilledByCheese