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

【问题标题】：Error: undefined Unable to resolve module错误：未定义无法解析模块
【发布时间】：2021-05-30 01:07:28
【问题描述】：

我正在尝试将 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确实存在于世博项目的相对位置：

，但我收到此错误：

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
}

有什么想法吗？

【问题讨论】：

RModelNoKeys.glb 的内容是什么？是 JS/JSON 还是别的什么？
它是一个二进制文件。 marxentlabs.com/glb-files
看起来它的行为好像 require 引擎没有将“glb”扩展名识别为正确的可导入文件扩展名，而是认为它需要附加其他已知扩展名之一。必须弄清楚在哪里选择了其他默认值，看看你是否可以扩展这个。
嘿@simo 我更新了我的答案，你能试试，让我知道它是否适合你
非常感谢@diedu，我会检查并更新你

标签： react-native expo

【解决方案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

【讨论】：