Unable to resolve "expo-gl" from "node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.dev.js"

[Daavidaviid]

My metro.config.js:

const path = require('path');
const { getDefaultConfig } = require('expo/metro-config'); // or "metro-config" if bare RN
const { withNativeWind } = require('nativewind/metro');
const { writeFileSync } = require('fs');

const config = getDefaultConfig(__dirname);

const threePackagePath = path.resolve(__dirname, 'node_modules', 'three');

config.resolver.unstable_conditionNames = ['browser', 'require', 'react-native'];

config.resolver.nodeModulesPaths = [
  path.resolve(__dirname, 'node_modules'),
  path.resolve(__dirname, '../node_modules'),
];

config.resolver.extraNodeModules = {
  three: threePackagePath,
};

config.resolver.disableHierarchicalLookup = true;
config.resolver.resolveRequest =  (context, moduleName, platform) => {
  if (moduleName.startsWith('three/addons/')) {
    return {
      filePath: path.resolve(threePackagePath, 'examples/jsm/' + moduleName.replace('three/addons/', '') + '.js'),
      type: 'sourceFile',
    };
  }
  if (moduleName === 'three' || moduleName === 'three/webgpu') { 
    return {
      filePath: path.resolve(threePackagePath, 'build/three.webgpu.js'),
      type: 'sourceFile',
    };
  }
  if (moduleName === 'three/tsl') { 
    return {
      filePath: path.resolve(threePackagePath, 'build/three.tsl.js'),
      type: 'sourceFile',
    };
  }
  // Let Metro handle other modules
  return context.resolveRequest(context, moduleName, platform);
};

config.transformer.getTransformOptions = async () => ({
  transform: {
    experimentalImportSupport: false,
    inlineRequires: true,
  },
});

config.resolver.assetExts.push('glb', 'gltf', 'jpg', 'bin', 'hdr');

// Write in a metro.log.json file
writeFileSync('metro.log.json', JSON.stringify(config, null, 2));

module.exports = withNativeWind(config, { input: './global.css' });

I'm trying to display the <Fiber /> example

package.json:

    "@react-three/fiber": "^9.3.0",
    "expo": "~53.0.20",
    "react": "19.0.0",
    "react-native": "0.79.5",
    "react-native-wgpu": "^0.2.1",
    "three": "^0.179.1",

    "@types/three": "^0.179.0",

[Daavidaviid]

Ok I just saw the patch here:
https://github.com/wcandillon/react-native-webgpu/blob/main/.yarn/patches/%40react-three-fiber-npm-8.17.6-bc537e834c.patch

[Daavidaviid]

I couldn't get the r3f example to work, even with the same versions as in this repo.
I get an error for:

React.useMemo(() => extend(THREE), []);

Saying THREE is undefined

[Daavidaviid]

The Cube example works but crashes in landscape