开发者问题收集

错误：未定义无法解析模块

2021-05-30
4268
react-native expo

我尝试将 glb 文件加载为： 

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'],
    },
};

尽管文件 RModelNoKeys.glb 确实存在于 expo 项目的相对位置：

enter image description here

，但我收到此错误： 

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
}

有什么想法吗？

1个回答

好吧，我进行了一些加载资产的实验，看起来在内联使用 require 时捆绑器出现了问题，例如，像这样使用图像组件会引发相同的错误 <Image source={require('some/asset/path')} />

尝试在上一行中需要您的资产，然后将其传递给 .fromModule 调用。 

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

await asset.downloadAsync();
...

此外，尝试使用此 metro.config.js 文件。 

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;

我创建了一个最小的可重现示例 repo 进行测试。你可以在这里查看 https://github.com/diedu89/expo-glb-asset

diedu
2021-06-03