ant-design-mobile: webpack2 ant-design-mobile error

本地环境

antd-mobile 版本： “antd-mobile”: “^0.9.8”,
操作系统及其版本： windows10 node: 7.0.0
浏览器及其版本： chrome55

你做了什么？

import 'antd-mobile/lib/button/style';
import Button from 'antd-mobile/lib/button';

import React, {Component} from 'react'

class AntNavBar extends Component {
  render () {
    return (
    <div>
      <Button>Start</Button>
    </div>
    )
  }
}

export default AntNavBar

.babelrc

{
  "presets": ["es2015", "stage-2", "react"],
  "plugins": [["import", { "libraryName": "antd-mobile", "style": "css" }],"transform-runtime", "transform-decorators-legacy", "transform-class-properties"],
  "comments": false
}

你期待的结果是：

像官网一样正常显示

实际上的结果：

ERROR in ./~/.0.9.8@antd-mobile/lib/button/index.js
Module not found: Error: Can't resolve 'react-native' in 'D:\test\js\1112\react-redux-antd-mobile\node_modules\.0.9.8@antd-mobile\lib\button'

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 34 (8 by maintainers)

Most upvoted comments

@timzaak https://github.com/ant-design/ant-design-mobile/issues/1010

什么时候能兼容webpack2.X, 现在webpack 都出到2.3了。

你的说法不准确，并不是 antd-mobile 来兼容 webpack 2.x, 只是配置方式变了而已，用户选择什么构建工具我们无法控制，你要使用 webpack2，你就得自己探索它的配置方法。

+22

paranoidjk on Mar 23, 2017

@deot 万分感谢！试了试，真的是按需加载。完美！！

最后总结一下：

依赖：
less  
less-loader 
svg-sprite-loader
babel-plugin-import

webpack配置文件：
//svg
const svgSpriteDirs = [
  require.resolve('antd-mobile').replace(/warn\.js$/, ''), // antd-mobile 内置svg
  //path.resolve(__dirname, 'src/my-project-svg-foler'),  // 业务代码本地私有 svg 存放目录
];
{
      test: /\.svg$/,
      loader: 'svg-sprite-loader',
      include: svgSpriteDirs,
}
//less
{
      test: /\.less$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "less-loader"
      }]
}
// babel js
{  
      test: /\.js$/, 
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
            plugins: [["import", {
                  libraryName: "antd-mobile",
                  style: true, 
            }]]
      },
}

//resolve,解决 antd-mobile 代码查找问题
resolve: {
    mainFiles: ["index.web","index"],// 这里哦
    modules: ['app', 'node_modules', path.join(__dirname, '../node_modules')],
    extensions: [
      '.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx',
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'jsnext:main',
      'main',
    ],
  },

以官方的NavBar demo测试，下面的引入方式也能按需加载
import {NavBar,Icon} from 'antd-mobile'

具体配置可参照 https://git.oschina.net/timzaak/graphql-web-mobile-starter 项目。不过配置有点复杂，不推荐。

@gooddaddy 你的问题必须看到你完整的配置才可以往下走。

timzaak on Apr 13, 2017

@timzaak 2.x使用这样的方式，我是这么解决的, 配置里

resolve: {		
    mainFiles: ["index.web","index"],// 这里哦
    modules: [path.resolve(__dirname, "src"), "node_modules"],
    extensions: ['.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
},

deot on Mar 25, 2017

Error: Cannot find module ‘antd-mobile/lib/button/style/css’ 老是报这个错误…

xmchyabi on Jul 25, 2017