React Native项目中@rnmapbox/maps模块语法错误求助

问题详情 #

打包index.js时触发如下语法错误：

SyntaxError: C:\WORK\plotlot\plotlot-25398\android\node_modules@rnmapbox\maps\src\Mapbox.ts: Unexpected token, expected "," (5:7)

3 | Camera,
4 | UserTrackingMode,

5 | type CameraPadding,
| ^
6 | type CameraAnimationMode,
7 | type CameraBounds,
8 | } from './components/Camera';

项目依赖版本：

• react: 17.0.2
• react-native: 0.66.5
• @rnmapbox/maps: 10.0.4

使用的代码示例：

import React from 'react';
import { StyleSheet, View ,Text} from 'react-native';
import Mapbox from '@rnmapbox/maps';

Mapbox.setAccessToken('access_token');

const HomeScreen = () => {
    return (
        <View style={styles.page}>
            <View style={styles.container}>
                <Text>test</Text>
                <Mapbox.MapView style={styles.map} />
            </View>
        </View>
    );
}

export default HomeScreen;

const styles = StyleSheet.create({
    page: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    container: {
        height: 300,
        width: 300,
    },
    map: {
        flex: 1
    }
});

问题原因 #

@rnmapbox/maps 10.x版本使用了TypeScript的**仅类型导入（type-only imports）**语法，但React Native 0.66.5默认的Babel配置不支持该语法，导致解析失败。

解决方法 #

方法一：添加Babel插件支持类型导入 #

1. 安装插件

npm install --save-dev @babel/plugin-proposal-type-only-imports
# 或用yarn
yarn add --dev @babel/plugin-proposal-type-only-imports

2. 修改babel.config.js
   在项目根目录的babel.config.js中添加该插件：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    '@babel/plugin-proposal-type-only-imports'
  ]
};

3. 清理缓存并重新打包

npx react-native start --reset-cache
npx react-native run-android

方法二：降级@rnmapbox/maps版本 #

如果不想修改Babel配置，可以降级到兼容旧RN版本的9.x系列：

npm install @rnmapbox/maps@9.6.4
# 或yarn
yarn add @rnmapbox/maps@9.6.4

内容的提问来源于stack exchange，提问作者thedomguy