Error: undefined Unable to resolve module

Question

I am trying to load glb file as:

const asset = Asset.fromModule(require('../assets/webgl/RModelNoKeys.glb'));

#metro.config.js

module.exports = {
    resolver: {
        assetExts: ['db', 'mp3', 'ttf', 'obj', 'png', 'jpg', 'gltf', 'glb'],
    },
    transformer: {
        assetPlugins: ['expo-asset/tools/hashAssetFiles'],
    },
};

although the file RModelNoKeys.glb does exist at the relative location at expo project:

, but I am getting this error:

None of these files exist:
* App/assets/webgl/RModelNoKeys.glb(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  * App/assets/webgl/RModelNoKeys.glb/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  55 | async function main() {
  56 |   try {
> 57 |     const asset = Asset.fromModule(require('../assets/webgl/RModelNoKeys.glb'));
     |                                             ^
  58 |     await asset.downloadAsync();
  59 |
  60 |     const b64 = await FileSystem.readAsStringAsync(asset.localUri, {
    at ModuleResolver.resolveDependency (/Users/sam/sam-expo/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15)
    at DependencyGraph.resolveDependency (/Users/sam/sam-expo/node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
    at Object.resolve (/Users/sam/sam-expo/node_modules/metro/src/lib/transformHelpers.js:317:42)
    at resolve (/Users/sam/sam-expo/node_modules/metro/src/DeltaBundler/traverseDependencies.js:629:33)
    at /Users/sam/sam-expo/node_modules/metro/src/DeltaBundler/traverseDependencies.js:645:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (/Users/sam/sam-expo/node_modules/metro/src/DeltaBundler/traverseDependencies.js:644:33)
    at /Users/sam/sam-expo/node_modules/metro/src/DeltaBundler/traverseDependencies.js:329:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/sam/sam-expo/node_modules/metro/src/DeltaBundler/traverseDependencies.js:137:24)
 ERROR  [Error: undefined Unable to resolve module ../assets/webgl/RModelNoKeys.glb from /Users/sam/sam-expo/App/containers/ReadScreen.js:

None of these files exist:
  * App/assets/webgl/RModelNoKeys.glb(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  * App/assets/webgl/RModelNoKeys.glb/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  55 | async function main() {
  56 |   try {
> 57 |     const asset = Asset.fromModule(require('../assets/webgl/RModelNoKeys.glb'));
     |

#package.json
{
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.7.1",
    "@react-native-community/cli-platform-android": "4.13.0",
    "@react-native-community/slider": "^3.0.3",
    "@react-native-community/viewpager": "^3.3.0",
    "expo": "~41.0.1",
    "expo-asset": "~8.3.1",
    "expo-gl": "~10.2.0",
    "expo-splash-screen": "~0.10.2",
    "expo-status-bar": "~1.0.4",
    "expo-three": "^5.7.0",
    "expo-updates": "~0.5.5",
    "moment": "^2.29.1",
    "native-base": "^2.15.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "~0.64.1",
    "react-native-bootsplash": "^3.2.3",
    "react-native-custom-keyboard-kit": "^1.0.2",
    "react-native-gesture-handler": "~1.10.3",
    "react-native-modal": "^11.10.0",
    "react-native-reanimated": "~2.2.0",
    "react-native-restart": "^0.0.22",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "~3.3.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-sqlite-storage": "^5.0.0",
    "react-native-unimodules": "~0.13.3",
    "react-native-web": "~0.16.3",
    "react-native-webview": "^11.6.2",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4",
    "react-navigation-tabs": "^2.11.1",
    "three": "^0.129.0"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/runtime": "^7.14.0",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^27.0.1",
    "eslint": "^7.27.0",
    "jest": "^27.0.1",
    "metro-react-native-babel-preset": "^0.66.0",
    "react-test-renderer": "17.0.2"
  },
  "private": true
}

any idea?

What is the contents of the `RModelNoKeys.glb`? Is it JS / JSON or something else? — Gavin Harris, May 30 '21 at 04:54
Looks like it's behaving as if the require engine isn't recognizing the "glb" extension as a proper importable file extension and is instead thinking it needs to append one of the other known extensions to it. Will have to figure out where the other defaults are selected to see if you can extend this one out. — Atmas, Jun 03 '21 at 04:38
hey @simo I updated my answer, could you try it and let me know if it works for you — diedu, Jun 06 '21 at 06:44

diedu · Accepted Answer · 2021-06-06T06:44:08.967

Well, I performed some experiments loading assets, it looks like there is a problem with the bundler when using require inline, e.g., using the image component like this fires the same error <Image source={require('some/asset/path')} />

Try requiring your asset in a previous line and then pass it to the .fromModule call.

...
const rModelNoKeysAsset = require('../assets/webgl/RModelNoKeys.glb');
const asset = Asset.fromModule(rModelNoKeysAsset);

await asset.downloadAsync();
...

And also, try with this metro.config.js file.

const { getDefaultConfig } = require('@expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts = [...defaultConfig.resolver.assetExts, 'db', 'mp3', 'ttf', 'obj', 'png', 'jpg', 'gltf', 'glb'];

module.exports = defaultConfig;

I created a minimal reproducible example repo to test. You can take a look here https://github.com/diedu89/expo-glb-asset

Error: undefined Unable to resolve module

1 Answers1