Ant-design-mobile: unable to resolve module `react-dom`

[wanxsb]

Version

2.0.2

Environment

系统版本macOS 10.12.6, react-native 0.47

Reproduction link

https://github.com/yiminghe/css-animation/blob/master/src/Event.js#L22

Steps to reproduce

在项目中运行npm install --save antd-mobile，获得依赖库如下

在项目中使用
import { Toast} from 'antd-mobile';

Toast.info(message, 1)
但是运行时出现依赖react-dom的错误

"Unable to resolve module react-dom from `/Users/xiesubin/Workspace/Project/seller-pad-rn/node_modules/rc-animate/lib/AnimateChild.js

使用 npm install --save react-dom安装依赖后，会再出现
document.createElement not defined错误，
报错位置为css-animation/blob/master/src/Event.js 22
https://github.com/yiminghe/css-animation/blob/master/src/Event.js#L22
怀疑是antd-mobile的依赖库的问题

What is expected?

期望的结果是不报错

What is actually happening?

"Unable to resolve module react-dom from `/Users/xiesubin/Workspace/Project/seller-pad-rn/node_modules/rc-animate/lib/AnimateChild.js

---

项目的依赖库如下：
javascript "dependencies": { "antd-mobile": "^2.0.2", "axios": "^0.16.2", "immutable": "^3.8.2", "moment": "^2.19.1", "numeral": "^2.0.6", "react": "16.0.0-alpha.12", "react-native": "0.47.0", "react-native-actioncable": "0.0.3", "react-native-actionsheet": "^2.3.0", "react-native-code-push": "^5.1.0-beta", "react-native-qrcode": "^0.2.3", "react-native-snap-carousel": "^3.4.0", "react-native-ui-kitten": "^2.0.1", "react-native-vector-icons": "^4.4.2", "react-native-version-number": "^0.3.0", "react-navigation": "^1.0.0-beta.19", "react-redux": "^5.0.6", "redux": "^3.7.2", "redux-immutable": "^4.0.0", "redux-logger": "^3.0.6", "redux-persist-immutable": "^4.3.1", "redux-thunk": "^2.2.0", "remote-redux-devtools": "^0.5.12", "reselect": "^3.0.1" },

[silentcloud]

@wanxsb 检查你自己的配置， RN 组件没有用到 rc-animate，只在 web 用到；或者把项目传到 github 给个地址

[wanxsb]

@silentcloud https://github.com/wanxsb/AntdMobileDemo

从报错信息来看，组件确实用到了rc-animate

[silentcloud]

@wanxsb 看文档 https://mobile.ant.design/docs/react/introduce-cn#按需加载

如果不使用 babel-plugin-import 就需要写成

import Toast from 'antd-mobile/lib/toast';
import List from 'antd-mobile/lib/list';

[heynext]

我使用了 babel-plugin-import 方式引用组件，开发环境是么有问题，但是 exp build 时候报同样的错误。2.0.3 版本

[exp] Unable to resolve module `react-dom` from `/Users/SnowCakeX/Repo/easypas/easypas-hr/node_modules/rc-animate/lib/AnimateChild.js`: Module does not exist in the module map

[zim-lee]

@XBT1 我也是，用了babel-plugin-import依然报相同的错误，只能这样：

import Toast from 'antd-mobile/lib/toast';
import List from 'antd-mobile/lib/list';

ant-mobile版本2.1.1
rn 0.51.0

[zxj963577494]

@wanxsb
@zim-lee
@XBT1

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source",
        ["import", { "libraryName": "antd-mobile" }]
      ]
    }
  }
}

改成

  "presets": ["babel-preset-expo"],
  "plugins": [["import", { "libraryName": "antd-mobile" }]],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}

第一段代码是在开发环境中用到了按需加载，正确的应该是第二种。官方提供的示例代码中，README代码是正确的，.babelrc中提供了第一段代码但它是在开发环境下的。
看看是不是这个问题？

[arniu]

@wanxsb @silentcloud @XBT1 @zim-lee @zxj963577494

请问这个问题解决了吗？

我这 RN 是 0.52.1，没有用到 expo，也是这个问题。

[zim-lee]

@arniu 参照@zxj963577494 给的配置，我现在的配置也是这样，运行没问题

[arniu]

@zim-lee @zxj963577494 非常感谢，我也成功了~

我这没有用 crna，所以 preset 是 react-native。查看 babel-preset-expo 源码，发现比 babel-preset-react-native 多个插件 babel-plugin-module-resolver。

总结下来，如果直接使用 react-native，antd-mobile 的安装过程如下：

1. npm i antd-mobile

2. npm i -D babel-plugin-import babel-plugin-module-resolver

3. update .babelrc:

{
  "presets": ["react-native"],
  "plugins": [["import", { "libraryName": "antd-mobile" }]],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}

@sorrycc 貌似 babel-plugin-import 用到了 babel-plugin-module-resolver，但是没有检查~

[fallenner]

@arniu RN 0.55.3 android 仍然会出现unable to resolve module react-dom 错误

[arniu]

@fallenner 貌似是 babel-preset-react-native 升级到 5.0 的缘故，不妨降回 4.0 试试。我现在不用这个库了，没法验证，抱歉的很~

[gibbsfromncis]

Error still happens to me:

"react": "16.3.1",
"react-native": "0.55.3",

dev:

babel-jest": "22.4.3",
    "babel-plugin-import": "^1.7.0",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-preset-react-native": "^4.0.0",
    "concurrently": "^3.5.1",
    "jest": "22.4.3",
    "react-test-renderer": "16.3.1",
    "rimraf": "^2.6.2",
    "tslint": "^5.9.1",
    "tslint-config-airbnb": "^5.8.0",
    "typescript": "^2.8.3"

Any fix described above doesn't work

[aruldd]

+1

Environment:
Mac OS
Latest native: 0.55.3

[michaelkrog]

Also happening for me when using Calendar.

Ubuntu 16.04
react: 16.3.1
react-native: 0.55.4

[zhangyu921]

2.2.0即使按上面的配置也还是报错，回退成2.1.7版本可以了
RN：0.46.4

[funyaliga]

+1
2.2.0报错，退版本就好了

[Clearives]

+10086
2.2.0报错，退版本2.1.5就好了

[JonathanLee-LX]

+10086
2.2.0报错，退版本2.1.5就好了

nice,退到2.15就好了