XCode error when building with Capacitor SplashScreen

Capacitor
1

This is my first time using Capacitor and I am running into some issues trying to use the SplashScreen plugin in my app.

I installed the plugin using NPM:
npm install @capacitor/splash-screen

And made sure to have the @capacitor/core and CLI tools installed.

When I added the IOS platform to my project and ran:

npx cap sync
npx cap copy ios
npx cap open ios

I get these errors when I am trying to compile the app within XCode 12.4:

/node_modules/@capacitor/splash-screen/ios/Plugin/SplashScreenPlugin.swift:9:45: 
Cannot use optional chaining on non-optional value of type 'UIViewController'

/node_modules/@capacitor/splash-screen/ios/Plugin/SplashScreenPlugin.swift:62:46: Type 'UIColor' has no member 'capacitor'

node_modules/@capacitor/splash-screen/ios/Plugin/SplashScreenPlugin.swift:73:43: Type 'UIColor' has no member 'capacitor'

This is my capacitor.config.json:

"plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000,
      "showSpinner": false,
      "androidSplashResourceName": "splash",
      "androidScaleType": "CENTER_CROP",
      "androidSpinnerStyle": "small",
      "iosSpinnerStyle": "small",
      "spinnerColor": "#ffffff",
      "backgroundColor": "#34ace0"
    }
  },

Any thoughts on what I may have done incorrectly?

2

What version of Capacitor are you using? Can you post your package.json

3

{
“name”: “bluebeacon-game-center-app”,
“version”: “0.0.1”,
“private”: true,
“dependencies”: {
“@capacitor-community/bluetooth-le”: “^0.6.0”,
“@capacitor/android”: “^2.4.7”,
“@capacitor/core”: “^2.4.7”,
“@capacitor/ios”: “^2.4.7”,
“@ionic-native/bluetooth-le”: “^5.32.1”,
“@ionic/react”: “^5.3.1”,
“@ionic/react-router”: “^5.3.1”,
“@types/jest”: “24.0.18”,
“@types/node”: “12.7.5”,
“@types/react”: “^16.9.43”,
“@types/react-dom”: “^16.9.8”,
“@types/react-router”: “^5.1.8”,
“@types/react-router-dom”: “^5.1.5”,
“cordova-plugin-bluetoothle”: “^6.3.1”,
“cordova-plugin-ionic”: “5.4.7”,
“cordova-plugin-whitelist”: “^1.3.4”,
“ionicons”: “^5.0.1”,
“node-sass”: “^4.13.0”,
“react”: “^16.13.1”,
“react-dom”: “^16.13.1”,
“react-router”: “^5.2.0”,
“react-router-dom”: “^5.2.0”,
“react-scripts”: “^3.4.1”,
“reselect”: “^4.0.0”
},
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
},
“eslintConfig”: {
“extends”: “react-app”
},
“browserslist”: [
“>0.2%”,
“not dead”,
“not ie <= 11”,
“not op_mini all”
],
“description”: “An Ionic project”,
“devDependencies”: {
“@capacitor/cli”: “^2.4.7”,
“@testing-library/react”: “^9.3.1”,
“@types/googlemaps”: “^3.38.0”,
“typescript”: “3.8.3”
}
}

4

So the capacitor/splash-screen plugin is only for v3 use. Uninstall it and rerun sync and you should be good.

5

Opps, my bad… I posted my package.json file responding to the wrong thread.