Cannot read property 'Canvas' of undefined

[thechaudharysab]

This error can be too generic but on the latest version of react-native, it's not working. Here are the issue details:

Following the latest documentation for react-native https://r3f.docs.pmnd.rs/getting-started/installation#react-native, after having the dependencies installed in my react-native CLI project in Typescript (I used expo-cli to install the expo packages):

  "dependencies": {
    "@react-three/fiber": "^8.17.6",
    "expo-gl": "^14.0.2",
    "install-expo-modules": "latest",
    "react": "18.3.1",
    "react-native": "0.75.2",
    "three": "^0.167.1"
  },

I went to my metro.config.js and it looks like the below:

After that when I built and ran the project on an Android physical device it gave me an error until I installed the following packages too:

 "expo-asset": "^10.0.10",
 "expo-file-system": "^17.0.1",
 "expo-modules-core": "^1.12.23",

As I'm using typescript so my dev dependencies are:

  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.75.2",
    "@react-native/eslint-config": "0.75.2",
    "@react-native/metro-config": "0.75.2",
    "@react-native/typescript-config": "0.75.2",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "@types/three": "^0.168.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },

But then I get these errors no matter what else I install and I'm not sure why it's happening as the Canvas (when I cmd + click it) exists.