React Native+TypeScript Lerna Monorepo出现import语句模块外使用语法错误

针对你在Lerna架构的React Native Monorepo中遇到的语法错误，结合你的配置文件，以下是具体的排查和修复方案：

1. 修复Jest配置中的重复transform字段 #

你的jest.config.js中存在两个重复的transform配置，这会导致配置覆盖，Jest无法正确处理文件转换。合并后的配置如下：

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  rootDir: '../',
  preset: 'ts-jest',
  setupFiles: ['<rootDir>/configs/setupTests.js'],
  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'ts-jest',
  },
  collectCoverageFrom: [
    '<rootDir>/**/*.{js,ts,tsx}',
    '!<rootDir>/**/__snapshots__/*.*',
    '!<rootDir>/**/config/*.js',
    '!<rootDir>/**/constants/*.*',
    '!<rootDir>/**/*.style.*',
    '!<rootDir>/**/theme/**',
    '!<rootDir>/coverage/**',
    '!<rootDir>/store.ts',
  ],
  coveragePathIgnorePatterns: [
    '<rootDir>/src/assets/',
    '<rootDir>/src/configs/',
    '<rootDir>/node_modules/',
    'graphql',
    '<rootDir>/src/*/*.test.{js,ts,tsx}',
  ],
  transformIgnorePatterns: [
    'node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation|@react-native(-community)?|react-native-vector-icons|react-navigation-helpers|react-native-normalize|react-native-keyboard-aware-scroll-view|react-navigation/native|react-native-ratings|react-native-autocomplete-dropdown|react-native-size-matters|react-native-skeleton-placeholder|kfc-native-component-library|judokit-react-native|react-native-redash|react-native-reanimated|@react-native-cookies/cookies)',
  ],
  moduleNameMapper: {
    '^uuid': require.resolve('uuid'),
  },
  testMatch: ['<rootDir>/**/*.test.{js,ts,tsx}'],
  verbose: true,
  globals: {
    'ts-jest': {
      babelConfig: true,
      tsConfig: 'packages/MyApp/tsconfig.json',
    },
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

2. 移除package.json中的重复Jest配置 #

你的package.json中同时存在独立的jest.config.js和内嵌的jest配置块，这会造成冲突。删除package.json中的以下内容：

"jest": {
    "preset": "react-native",
    "setupFilesAfterEnv": [
      "@testing-library/jest-native/extend-expect"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }

3. 调整Babel预设顺序 #

React Native的Metro预设需要优先加载，才能正确处理React Native的语法和模块。修改babel.config.js：

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
  plugins: [
    '@babel/plugin-transform-react-jsx',
    'react-native-reanimated/plugin',
  ],
};

4. 完善TypeScript配置 #

在tsconfig.json中添加moduleResolution字段，确保模块解析规则与CommonJS兼容：

"extends": "@tsconfig/react-native/tsconfig.json",
"files": ["globals.d.ts"],
"compilerOptions": {
  "composite": true,
  "target": "esnext",
  "lib": ["es2017"],
  "jsx": "react-native",
  "module": "commonjs",
  "moduleResolution": "node",
  "declaration": true,
  "outDir": "./",
  "esModuleInterop": true,
  "strict": true,
  "skipLibCheck": true
}

5. 额外检查步骤 #

• 清理缓存和依赖：执行rm -rf node_modules && npm install && npx jest --clearCache
• 检查Monorepo中其他模块的输出格式，如果其他模块使用ES模块，需要将其包名添加到jest.config.js的transformIgnorePatterns中，确保Jest能转换这些模块
• 确认所有本地模块的import语句使用正确的文件扩展名

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