antd-mobile 用typescript+webpack打包时提示找不到react-native definition file.

[pxb]

本地环境

• antd-mobile 版本：0.9.11
• 浏览器 (或标明是 react-native) 及其版本：chome
• 运行环境及其版本：

你做了什么？

我做的web项目.

import { Button } from 'antd-mobile';

用webpack+typescript+antd-mobile打包

提示
Cannot find type definition file for 'react-native'.

我想可能是因为antd-mobile的web.d.ts文件不能优先被tsc处理

[pxb]

ERROR in ./src/index.tsx
Module not found: Error: Cannot resolve module 'antd-mobile' i n C:\develop\typescript\hello\src
@ ./src/index.tsx 5:20-42

ERROR in [at-loader] node_modules\antd-mobile\lib\search-bar\P ropsType.d.ts:2:1
Cannot find type definition file for 'react-native'.

ERROR in [at-loader] node_modules\antd-mobile\lib\search-bar\P ropsType.d.ts:38:22
Namespace 'React' has no exported member 'ViewStyle'.

ERROR in [at-loader] node_modules\antd-mobile\lib\search-bar\P ropsType.d.ts:39:24

[pxb]

webpack.config.js配置
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},

// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",

resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},

module: {
    loaders: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
        { test: /\.tsx?$/, loader: "awesome-typescript-loader" }
    ],

    preLoaders: [
        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
        { test: /\.js$/, loader: "source-map-loader" }
    ]
},

// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
    "react": "React",
    "react-dom": "ReactDOM"
},

};

[warmhug]

关联 #531 #376

[pxb]

请问有没有在typescript中使用 antd-mobile的实例， 我在文档里没有找到

[pxb]

我看了 https://github.com/warmhug/__/tree/master/_react/dva-ts， 这里没有关于怎么引用antd-mobile的例子。
antd-mobile不是一个组件库吗？ 我直接npm install antd-mobile; 之后， 在代码里
import {Button} from 'antd-mobile';
然后用webpack+ts-loader 打包就遇到错误提示，我是根据typescript官方文档上的提示做的https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

编译提示：

ERROR in [at-loader] node_modules\antd-mobile\lib\search-bar\PropsType.d.ts:2:1
Cannot find type definition file for 'react-native'.

ERROR in [at-loader] node_modules\antd-mobile\lib\search-bar\PropsType.d.ts:38:22
Namespace 'React' has no exported member 'ViewStyle'.

ERROR in [at-loader] node_modules\antd-mobile\lib\search-bar\PropsType.d.ts:39:24
Namespace 'React' has no exported member 'ViewStyle'.

ERROR in [at-loader] node_modules\antd-mobile\lib\search-bar\PropsType.d.ts:40:36
Namespace 'React' has no exported member 'ViewStyle'.

ERROR in [at-loader] node_modules\antd-mobile\lib\search-bar\PropsType.d.ts:41:27
Namespace 'React' has no exported member 'ViewStyle'.

[warmhug]

@mineralres 这个估计是 search-bar 组件里引用错误，我修复下

[pxb]

这个fix什么时候会更新到npm 包中呢？ 我现在通过什么方式应用你这个fix最合适？

[Ray]

配置了一个测试项目inferno-starter，使用typescript引入antd-mobile就报错😔

[warmhug]

@mineralres @xiaokekeT 下午发 0.9.12 ，会解决这个问题。并提供一个推荐的 typescript 项目示例出来

[warmhug]

已发布 0.9.12 ，外带推荐的 typescript 使用示例：

关联 #56 (comment)

[pxb]

@warmhug 例子跑通了。
用typescript ，还是需要用到babel-loader吗？ 比如import{Button} from 'antd-mobile'; 编译出来的文件转换为'/antd-mobile/lib/button/'吗？

[warmhug]

需要，babel-plugin-import 需要 babel

[pxb]

TabBarItem 这种需要怎么引入呢？ 我直接import{TabBar, TabBarItem} from 'antd-mobile';是找不到的模块，于是我尝试在tab-bar/index.web.d.ts加一句export { default as TabBarItem } from './TabBarItem';
又会提示找不到
Cannot resolve module 'antd-mobile/lib/tab-bar-item/style/css'

[warmhug]

const TabBarItem = TabBar.Item

[pxb]

添加const TabBarItem = TabBar.Item之后
ERROR in ./src/components/TsExample.tsx
(5,27): error TS2339: Property 'Item' does not exist on type 'ClassicComponentClass<{ prefixCls: string; barTintColor: string; tintColor: string; unselectedTin...'.

ERROR in ./src/components/TsExample.tsx
Module not found: Error: Cannot resolve module 'antd-mobile' in C:\develop\typescript\hello\src\components
@ ./src/components/TsExample.tsx 19:20-42

[afc163]

#602

[Ray]

proptypes漏太多了没法用啊

[warmhug]

@xiaokekeT @mineralres 哪些 proptypes 漏了，欢迎帮忙贴出来、下个版本会全部 review 一遍尽量都修复掉

[Xiaobin Cui]

propTypes 是 @yiminghe 之前有意删除的。

[warmhug]

@benjycui 我知道这个，这里是说的 typescript 里的 interface 不完善

[warmhug]

有问题在新开 issue ，前边提到的问题都修复了，升级到新版本

[paranoidjk]

@benjycui

删除propTypes, 完全依赖ts的类型检查可以理解。
但是我有个疑问，用户使用的时候（假设用户代码是非typescript），运行时组件内部不是就没有React PropType的检查了吗？
还是我哪里理解错了？

[Xiaobin Cui]

是的， @yiminghe 决定的。