Skip to content

Latest commit

 

History

History
111 lines (73 loc) · 3.5 KB

FAQ.md

File metadata and controls

111 lines (73 loc) · 3.5 KB
Raw

目录

FAQ

hmrClient.send is not a function

当出现以下错误时需要升级metro至^0.56.0：react-native#issue-26958。

TypeError: hmrClient.send is not a function. (In 'hmrClient.send(JSON.stringify({
  type: 'log-opt-in'
}))', 'hmrClient.send' is undefined)

在 RN 工程node_modules目录中找到metro并查看版本:

cat ./node_modules/metro/package.json | grep version

使用 @ant-design/react-native 组件时，报错：Unrecognized font family 'antoutline'

ant-design/ant-design-mobile-rn#issue-194：

yarn react-native unlink && yarn react-native link

Unable to Resolve Module in React Native App

facebook/react-native#issue-1924

初级清缓存方案

MacOS

watchman watch-del-all && yarn start --reset-cache

Window

yarn start --reset-cache

终极清缓存方案

MacOS

watchman watch-del-all && rm -fr $TMPDIR/react-* && rm -fr $TMPDIR/metro-* && rm -fr $TMPDIR/haste-map-* && rm -fr node_modules && yarn cache clean --force && yarn && yarn start --reset-cache

Windows

del %appdata%\Temp\react-* & del %appdata%\Temp\metro-* & del %appdata%\Temp\haste-map-* & cd android & gradlew clean & cd .. & del node_modules/ & yarn cache clean --force & yarn & yarn start --reset-cache

Attempted to assign to readonly property

使用第三方的haul打包器时，运行时会出现该错误。

原因如下：

haul使用 webpack 打包，其中 babel-loader 的 exclude 配置如下：

node_modules(?!.*[\/\\](react|@react-navigation|@react-native-community|@expo|pretty-format|@haul-bundler|metro))

因此，能够匹配以上正则的 npm 包全都不会被 babel 编译。

当某个依赖（比如：@react-native-community/viewpager ）发布到 npm 的代码不是 ES5 时，就会出现该错误。

因为 RN 官方的 metro 会使用 babel 编译所有代码，所以不存在该问题。这些 npm 依赖专门针对 RN 所以未编译为 ES5。

提供一个简单的方案：

把导致该问题的依赖代码拷贝到工程目录下:

cp -r node_modules/@react-native-community/viewpager/js ./components/viewpager

使用alias配置修改引用位置：

// .umirc.js
export default {
  alias: {
    '@react-native-community/viewpager': '@/components/viewpager',
  },
};

这样，当我们在代码中引入 @react-native-community/viewpager 时：

import ViewPager from '@react-native-community/viewpager';
// 等价于:
// import ViewPager from '@/components/viewpager';

实际上会引入工程内部 ./components 目录中被 babel 所编译过的 viewpager/。