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

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

项目的依赖库如下：

"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"
	},

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 18 (5 by maintainers)

Most upvoted comments

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

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

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

npm i antd-mobile
npm i -D babel-plugin-import babel-plugin-module-resolver
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，但是没有检查~

arniu on Feb 3, 2018

@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';

silentcloud on Nov 8, 2017

@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中提供了第一段代码但它是在开发环境下的。看看是不是这个问题？

zxj963577494 on Dec 26, 2017

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

funyaliga on Jun 26, 2018

Also happening for me when using Calendar.

Ubuntu 16.04 react: 16.3.1 react-native: 0.55.4

michaelkrog on May 27, 2018

Environment: Mac OS Latest native: 0.55.3

aruldd on May 9, 2018

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

gibbsfromncis on Apr 29, 2018