解决React Native ViewPropTypes弃用及babel.config.js重复插件错误

我为解决React Native中ViewPropTypes弃用问题，配置了babel.config.js和自定义resolver文件，但运行时触发了**"Duplicate plugin/preset detected"**错误。

原配置代码 #

babel.config.js #

const path = require('path');
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          tests: ['./tests/'],
          '@components': './src/components',
        },
      },
    ],
    [
      'module-resolver',
      {
        root: ['.'],
        resolvePath(sourcePath, currentFile) {
          if (
            sourcePath === 'react-native' &&
            currentFile.includes('react-native-camera/src/RNCamera.js')
          ) {
            console.log('resolver', sourcePath, currentFile);
            return path.resolve(__dirname, 'resolver/react-native');
          }
          return undefined;
        },
      },
    ],
  ],
};

resolver文件 #

import * as ReactNative from 'react-native';

delete ReactNative.ColorPropType;
delete ReactNative.EdgeInsetsPropType;
delete ReactNative.ImagePropTypes;
delete ReactNative.PointPropType;
delete ReactNative.TextInputPropTypes;
delete ReactNative.TextPropTypes;
delete ReactNative.ViewPropTypes;

module.exports = {
  ...ReactNative,
  get ViewPropTypes() {
    return require('deprecated-react-native-prop-types/DeprecatedViewPropTypes');
  },

  get ColorPropType() {
    return require('deprecated-react-native-prop-types/DeprecatedColorPropType');
  },

  get EdgeInsetsPropType() {
    return require('deprecated-react-native-prop-types/DeprecatedEdgeInsetsPropType');
  },

  get PointPropType() {
    return require('deprecated-react-native-prop-types/DeprecatedPointPropType');
  },
};

错误信息 #

error: index.js: 检测到重复的插件/预设。
如果需要使用同一插件的两个独立实例，
需为它们指定不同名称，例如：

plugins: [
['some-plugin', {}],
['some-plugin', {}, 'some unique name'],
]

错误原因 #

Babel不允许重复加载同名插件且未指定唯一标识，这里重复注册了两次module-resolver插件，导致冲突。

修复方案 #

方案1：合并配置（推荐） #

将两个module-resolver的配置项合并为一个，既保留所有功能，又避免重复加载插件：

const path = require('path');
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        // 合并两个root配置
        root: ['./src', '.'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          tests: ['./tests/'],
          '@components': './src/components',
        },
        // 保留自定义resolvePath逻辑
        resolvePath(sourcePath, currentFile) {
          if (
            sourcePath === 'react-native' &&
            currentFile.includes('react-native-camera/src/RNCamera.js')
          ) {
            console.log('resolver', sourcePath, currentFile);
            return path.resolve(__dirname, 'resolver/react-native');
          }
          return undefined;
        },
      },
    ],
  ],
};

方案2：给重复插件加唯一名称 #

如果必须分开两个插件实例，给第二个实例添加唯一名称即可：

const path = require('path');
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          tests: ['./tests/'],
          '@components': './src/components',
        },
      },
    ],
    [
      'module-resolver',
      {
        root: ['.'],
        resolvePath(sourcePath, currentFile) {
          if (
            sourcePath === 'react-native' &&
            currentFile.includes('react-native-camera/src/RNCamera.js')
          ) {
            console.log('resolver', sourcePath, currentFile);
            return path.resolve(__dirname, 'resolver/react-native');
          }
          return undefined;
        },
      },
      // 添加唯一名称，区分两个插件实例
      'react-native-camera-resolver'
    ],
  ],
};

额外验证 #

确保已安装依赖包：

npm install deprecated-react-native-prop-types --save
# 或使用yarn
yarn add deprecated-react-native-prop-types

内容的提问来源于stack exchange，提问作者Ali Yar Khan