React Native引入IFC文件报错：Unexpected digit after hash token

问题根源 #

你把.ifc后缀加到了metro.config.js的sourceExts数组里，Metro会把它当成JavaScript源码文件去解析，但IFC文件的语法（比如开头的#1=）和JS完全不兼容，所以抛出了语法错误。

解决步骤 #

1. 修正Metro配置 #

把.ifc从sourceExts移到assetExts里，告诉Metro这是资源文件而非源码：

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

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: [...assetExts, 'ifc', 'dwg', 'dxf'], // 将ifc添加到资源扩展名列表
      sourceExts: sourceExts.filter(ext => ext !== 'svg').concat('svg'), // 移除sourceExts中的ifc
    },
  };
})();

2. 修正IFC文件加载代码 #

IFC是资源文件，需要先获取它的本地URL，再用IFCLoader加载，而非直接require当成模块：

import { IFCLoader } from 'three/examples/jsm/loaders/IFCLoader';
import { Asset } from 'expo-asset';
import { GLView } from 'expo-gl';
import * as THREE from 'three';

export function Main() {
  const loadIFC = async (gl) => {
    // 初始化Three.js基础场景
    const scene = new THREE.Scene();
    const renderer = new THREE.WebGLRenderer({ gl });
    const camera = new THREE.PerspectiveCamera(75, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 1000);
    
    // 获取IFC资源的本地URL
    const ifcAsset = Asset.fromModule(require('./test2.ifc'));
    await ifcAsset.downloadAsync();
    const ifcUrl = ifcAsset.localUri;

    // 加载并添加IFC模型到场景
    const ifcLoader = new IFCLoader();
    const ifcModel = await ifcLoader.loadAsync(ifcUrl);
    scene.add(ifcModel);

    // 基础渲染配置
    camera.position.z = 5;
    renderer.render(scene, camera);
  };

  return <GLView style={{ flex: 1 }} onContextCreate={loadIFC} />;
}

3. 重启Metro服务器 #

修改配置后必须重启Metro才能生效，关闭当前Metro终端窗口，重新运行项目启动命令（比如npx expo start）。

内容的提问来源于stack exchange，提问作者Nilton Schumacher F