Hermes engine on React Native 0.72.5,function无法toString转成字符串

问题描述

Hermes engine on React Native 0.72.5,function无法toString转成字符串

环境

javascript 复制代码
npm@6.14.18
node@16.17.1

项目依赖

javascript 复制代码
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.5",
"react-native-gesture-handler": "2.14.1",
"react-native-root-siblings": "3.2.3",
"react-native-safe-area-view": "0.14.101",
"react-navigation": "3.11.1",
"react-art": "^18.2.0",
"react-native-web": "0.9.9",
"react-native-web-webview": "^0.2.8",
"react-navigation-hooks": "^1.0.0-alpha.2",
"@babel/core": "^7.13.10",
"@babel/eslint-parser": "^7.18.9",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-proposal-object-rest-spread": "^7.14.5",
"@babel/plugin-transform-runtime": "^7.16.4",
"@babel/preset-env": "^7.16.4",
"@babel/preset-flow": "^7.16.0",
"@babel/preset-react": "^7.16.0",
"@babel/runtime": "^7.16.3",
"@react-native/eslint-config": "^0.72.2",
"@react-native/metro-config": "^0.72.11",
"@types/node": "^14.18.36",
"@types/react": "^18.0.18",
"@typescript-eslint/eslint-plugin": "^5.36.1",
"@typescript-eslint/parser": "^5.36.1",
"babel-loader": "^8.2.3",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-show-source": "^0.2.1",
"@types/react-native": "^0.60.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.3",
"babel-jest": "23.6.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-native-web": "0.9.9",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.10",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-runtime": "^6.26.0",

解决方案

  1. 引入插件 babel-plugin-show-source
    插件地址:babel-plugin-show-source
  2. 配置项
javascript 复制代码
// babel.config.js
module.exports = {
  plugins: [
    'babel-plugin-show-source',
    // or with options
    [
      'babel-plugin-show-source',
      {
        removeDirective: true,
      },
    ],
  ],
};
  1. 在function的第一行加入 show source 即可解决问题。【function里不允许有注释内容
  2. 特殊情况
    若按以上操作不起作用,请在配置里单独设置指令,如
javascript 复制代码
plugins: [
    [
      'babel-plugin-show-source',
      {
        directive: 'show source please',
        // change the directive when in use with hermes
      },
    ],
  ],

再在function的第一行加入 show source please ,即可解决问题。

参考Issues

https://github.com/facebook/hermes/issues/612
https://github.com/supervons/react-native-echarts-pro/issues/35

相关推荐
iaku2 分钟前
🔥React工程化实践:构建企业级可维护应用架构
前端·react.js·前端框架
鸡米键盘2 分钟前
用 ts-results 改善JS/TS错误处理,告别“吞错误”
前端·javascript
kele_z16 分钟前
Element-UI实现跨页勾选
前端·javascript
拾光拾趣录40 分钟前
前端宏(微)任务 | 从“为什么我的代码不按顺序执行”说起
前端·javascript
狗都不学爬虫_1 小时前
JS逆向 - (国外)SHEIN站 - 请求头(armorToken、Anti-in)
javascript·python·ajax·网络爬虫·wasm
Mintopia1 小时前
🧠 三分视界:Three.js 离屏渲染与多重视角的艺术
前端·javascript·计算机图形学
前端小巷子2 小时前
Webpack 5模块联邦
前端·javascript·面试
晓得迷路了2 小时前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆2 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
LBJ辉4 小时前
2. Webpack 高级配置
前端·javascript·webpack