导入@react-three/fiber/native时出现SyntaxError语法错误求助

• 未导入import { Canvas, useFrame } from '@react-three/fiber/native';时，React Native代码可正常运行
• 导入该行后触发SyntaxError，错误指向three库的GLTFExporter.js第689行，提示无法识别可选链操作符?.

完整代码 #

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
import { Canvas, useFrame } from '@react-three/fiber/native';
 
type Props = {};
export default class MyApp extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.js
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2A2734',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'white'
  },
  instructions: {
    textAlign: 'center',
    color: '#B0B0B0',
    marginBottom: 5,
  },
});

// You must register the main component
// with the same name as the project
AppRegistry.registerComponent(
  'my-rn-app', () => MyApp
);

错误信息 #

SyntaxError: /private/var/mobile/Containers/Data/Application/9F5DA5AC-EFAF-4212-9C6D-2A8C02F52F9F/Documents/apps/MY-RN-APPA6763671-7979-46F5-997F-564C93F38391/src/node_modules/three/examples/js/exporters/GLTFExporter.js: Unexpected token (689:34)
  687 | 
  688 |             console.warn( 'THREE.GLTFExporter: Merged metalnessMap and roughnessMap textures.' );
> 689 |             const metalness = metalnessMap?.image;
      |                                            ^
  690 |             const roughness = roughnessMap?.image;
  691 |             const width = Math.max( metalness?.width || 0, roughness?.width || 0 );
  692 |             const height = Math.max( metalness?.height || 0, roughness?.height || 0 );
    at t.ie.raise (/private/var/containers/Bundle/Application/9583CB65-FEAC-4E72-A943-3188211F7B28/CodeSandbox.app/transpiler.js:1:468453)
    at t.$.unexpected (/private/var/containers/Bundle/Application/9583CB65-FEAC-4E72-A943-3188211F7B28/CodeSandbox.app/transpiler.js:1:421786)
    at t.re.parseExprAtom (/private/var/containers/Bundle/Application/9583CB65-FEAC-4E72-A943-3188211F7B28/CodeSandbox.app/transpiler.js:1:457116)
    at t.parseExprAtom (/private/var/containers/Bundle/Application/9583CB65-FEAC-4E72-A943-3188211F7B28/CodeSandbox.app/transpiler.js:1:513873)
    at t.re.parseExprSubscripts (/private/var/containers/Bundle/Application/9583CB65-FEAC-4E72-A943-3188211F7B28/CodeSandbox.app/transpiler.js:1:452009)
    at t.re.parseMaybeUnary (/private/var/containers/Bundle/Application/9583CB65-FEAC-4E72-A943-3188211F7B28/CodeSandbox.app/transpiler.js:1:451592)
    at t.re.parseExprOps (/private/var/containers/Bundle/Application/9583CB65-FEAC-4E72-A943-3188211F7B28/CodeSandbox.app/transpiler.js:1:450162)
    at t.re.parseMaybeConditional (/private/var/containers/Bundle/Application/9583CB65-FEAC-4E72-A943-3188211F7B28/CodeSandbox.app/transpiler.js:1:449753)
    at t.re.parseMaybeAssign (/private/var/containers/Bundle/Application/9583CB65-FEAC-4E72-A943-3188211F7B28/CodeSandbox.app/transpiler.js:1:448980)
    at t.parseMaybeAssign (/private/var/containers/Bundle/Application/9583CB65-FEAC-4E72-A943-3188211F7B28/CodeSandbox.app/transpiler.js:1:513077)Compilation failed: The operation couldn’t be completed. (playdotjs.Compiler.Error error 0.)

解决办法 #

原因 #

项目Babel默认配置不会转译node_modules中的第三方依赖代码，而three库的GLTFExporter.js使用了未转译的ES6+语法（可选链?.），导致旧版Babel无法识别。

方案1：修改Babel配置转译three库 #

在项目根目录的babel.config.js中，将three和@react-three加入转译白名单：

module.exports = {
  presets: [
    ['module:metro-react-native-babel-preset', {
      transformIgnorePatterns: [
        'node_modules/(?!(three|@react-three)/)'
      ]
    }]
  ]
};

方案2：降级three库版本 #

选择不使用可选链语法的three版本（如r128及更早版本），执行安装命令：

npm install three@^0.128.0 --save

方案3：升级React Native工具链 #

升级到React Native 0.64+版本，该版本默认Babel配置已支持可选链等ES6+语法，执行升级命令（升级前请备份代码）：

npx react-native upgrade

内容的提问来源于stack exchange，提问作者zendevil.eth