React Native Expo集成Tailwind时BABEL找不到node:path模块报错求助

报错详情 #

Android Bundling failed 25ms
error: node_modules\expo\AppEntry.js: [BABEL]: Cannot find module 'node:path'
Require stack:
C:\Users\HPX\ipx\node_modules\nativewind\dist\babel\index.js
C:\Users\HPX\ipx\node_modules\nativewind\babel.js
C:\Users\HPX\ipx\node_modules@babel\core\lib\config\files\module-types.js
C:\Users\HPX\ipx\node_modules@babel\core\lib\config\files\configuration.js
C:\Users\HPX\ipx\node_modules@babel\core\lib\config\files\index.js
C:\Users\HPX\ipx\node_modules@babel\core\lib\index.js
C:\Users\HPX\ipx\node_modules\metro-transform-worker\src\index.js
C:\Users\HPX\ipx\node_modules\metro\src\DeltaBundler\Worker.flow.js
C:\Users\HPX\ipx\node_modules\metro\src\DeltaBundler\Worker.js
C:\Users\HPX\ipx\node_modules\jest-worker\build\workers\processChild.js (While processing: C:\Users\HPX\ipx\node_modules\nativewind\babel.js)

相关文件内容 #

AppEntry.js #

import registerRootComponent from 'expo/build/launch/registerRootComponent';

import App from '../../App';

registerRootComponent(App);

package.json #

{
  "name": "ipx",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~47.0.3",
    "expo-status-bar": "~1.4.2",
    "nativewind": "^2.0.11",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "tailwindcss": "^3.2.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

解决方案 #

这个错误根源是node:path是Node.js 16+才支持的前缀导入语法，当前环境Node.js版本不足，或者Nativewind版本与环境不兼容，可按以下方式解决：

• 升级Node.js版本：将Node.js升级到16.x及以上的LTS版本，之后删除node_modules文件夹和package-lock.json/yarn.lock文件，执行npm install或yarn install重新安装依赖，再启动项目。
• 降级Nativewind版本：若暂时无法升级Node.js，可将Nativewind降级到2.0.10版本（该版本不依赖node:path语法）。修改package.json中nativewind的版本为^2.0.10，重新安装依赖即可。
• 配置Babel兼容转换：在项目根目录创建或修改babel.config.js，添加插件转换node:path导入：

  module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
      plugins: [
        "nativewind/babel",
        ["transform-node-path-imports", {
          "node:path": "path"
        }]
      ]
    };
  };
  

  然后安装该插件：npm install --save-dev babel-plugin-transform-node-path-imports

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