webpack2 ant-design-mobile error #516

fengyun2 · 2016-11-12T13:58:36Z

本地环境

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'

warmhug · 2016-11-12T14:48:07Z

注意看文档

fengyun2 · 2016-11-12T14:52:05Z

但是我在webpack1.x不用定义这个也可以运行哦, 但是到了webpack2.x就不行了哦。

warmhug · 2016-11-12T14:54:21Z

都要设置的

fengyun2 · 2016-11-12T15:03:11Z

好像在 webpack2.x 中 modulesDirectories 不在 resolve 中配置了。添加了上面给的配置项, 但是在webpack2.x中还是报这个错误。
同时也不明白 modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')],第一个参数,第二个参数分别是什么意思?

warmhug · 2016-11-29T08:50:02Z

欢迎帮忙排查原因。另外可以改回使用 webpack1.x 。

ibufu · 2017-03-17T08:26:33Z

@fengyun2 这个问题解决了吗

timzaak · 2017-03-23T06:47:47Z

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

paranoidjk · 2017-03-23T07:58:29Z

@timzaak #1010

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

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

timzaak · 2017-03-24T02:01:48Z

懂了。除了官方提供的，其他的都是用户的问题

paranoidjk · 2017-03-24T03:02:06Z

@timzaak 请谅解，我们人力和精力有限，上面我发你的issue的方案你可以试试。等roadhug升级到webpack2，我会给出官方的webpack2 demo。
也欢迎你帮我们贡献你的配置方法。

timzaak · 2017-03-24T04:24:08Z

基本上所有网上能搜到的方法，都尝试了。都报错。。报错内容也都是react-native找不到。

为什么执着于webpack2.x 主要是因为github上最火的两个react手脚架react-boilerplate，react-starter-kit 都是webpack2.x。
下面只能尝试改你们的构建脚本了。

yesmeck · 2017-03-24T04:56:42Z

看起来你们用的是 cnpm？

timzaak · 2017-03-24T05:43:23Z

npm install --verbose --registry=https://registry.npm.taobao.org
:)

deot · 2017-03-25T05:17:57Z

@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'],
},

timzaak · 2017-03-27T03:49:32Z

@deot O(∩_∩)O谢谢。完美解决react-native引入问题。但是还有less样式以及icon的问题。
icon问题好解决，只需要按照官网就可以了。

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问题，目前解决的不够优雅，期待有更好的方案:
webpack配置文件：

{
      test: /\.less$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "less-loader"
      }]
}

引入：

//遵照按需引入。 以官方的NavBar demo测试，需要如下引入

import 'antd-mobile/lib/nav-bar/style'
import NavBar from 'antd-mobile/lib/nav-bar'
import 'antd-mobile/lib/icon/style'
import Icon from 'antd-mobile/lib/icon'

//import 'antd-mobile/lib/nav-bar/style' 用来引入样式。如果ant-design的目录结构产生变化，需要调整

PS: 不需要引入babel-plugin-import

deot · 2017-03-27T07:22:48Z

@timzaak 要引入官方的样式可以不用你这个方式，这是引入antd-mobile的样式,这样你就可以相当的优雅了

{
  test: /\.(css|less)$/,
  use: ['style-loader','css-loader','less-loader'],// 一定要有style-loader
  include: [
      path.resolve(__dirname, "node_modules"), // 非常关键
      path.resolve(__dirname, "src")  // 还需要把你项目里的css，less所在的文件夹内敛
  ]
},

我项目是用sass的，不过同样可以帮到你

gooddaddy · 2017-04-11T16:12:20Z

我使用的webpack2.0，我按照下面的设置还是不行。。
resolve: {
mainFiles: ["index.web","index"],// 这里哦
modules: [path.join(__dirname, "../node_modules")],
// extensions: ['.web.js', '.js','.json'],
extensions: ['.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
},
....
plugins: [
['import', { libraryName: 'antd-mobile', style: 'css' }],
]

还是提示Error: Cannot find module 'antd-mobile/lib/button/style/css'

我引用的方式是import { Button} from 'antd-mobile';

himStone · 2017-04-12T02:04:46Z

官方的没出就再等等可以先参考下我的脚手架

https://github.com/bccsafe/typescript-react-redux-antd-mobile

webpack 2
React Router 4
TypeScript

timzaak · 2017-04-12T02:19:10Z

@deot 尝试后，发现不行。报错

ERROR in ./~/normalize.css/normalize.css
Module parse failed: /${project_path}/node_modules/normalize.css/normalize.css Unexpected token (13:5)
You may need an appropriate loader to handle this file type.

将 css|less改成 less。也还是不行。估计是因为我的是按需加载。导致只要项目中没引入的东西，就不会编译进去。

@gooddaddy 你可以参考下：http://git.oschina.net/timzaak/graphql-web-mobile-starter/blob/master/internals/webpack/webpack.base.babel.js?dir=0&filepath=internals%2Fwebpack%2Fwebpack.base.babel.js&oid=b2dae485d90abaa4cb44bfe22f556f884d9a2c68&sha=ccf4e4b98e32e9056c3fcfabdad92ad1a9fea71c

这是我copy react-boilerplate项目配置，并根据自己需求改的。

另外，我发现你引入了整个ant_design_mobile，如果这样的话，我觉得你可以尝试通过index.html直接引入ant_design_mobile 压缩好的文件。

至于 ['import', { libraryName: 'antd-mobile', style: 'css' }]。这个在我的配置里没有用到。

deot · 2017-04-12T04:03:22Z

@timzaak 我也不知道关于你的报错是怎么回事（我建议你多折腾一下，会舒服很多）....
另外看下path.resolve(__dirname, "node_modules") 这个__dirname是否出错了

后来我是在antd-mobile中使用下面这样的方式（因为发现我的页面本身需要这个东西，所以我做了一个处理）

import 'normalize.css/normalize.css';

timzaak · 2017-04-12T06:08:34Z

@deot 遵照按需引入的话，必须在某一个地方声明要引入的文件。纵观所有的library下的 .web.js文件，都没有声明引入相应的less文件。
解决方案：
1.直接引入dist/antd-mobile.less
2.围绕antd-mobile库写个webpack2插件。当引入 library下的x/index.web.js时，自动引入相应的less文件。
3.手动引入 import 'antd-mobile/lib/${library}/style'

方案1，和按需引入理念冲突。但如果方案2所说的插件解决后，会很容易就过渡过去，也是目前我个人认为最节约时间的解决方案。
方案2，由于目前本人对webpack的了解处于教程都没看过的阶段，留待以后有时间再解决。
方案3，有点笨拙，但基本上能解决问题。

deot · 2017-04-12T06:38:25Z

@timzaak 我刚才试了下你在oschina的项目,改写后毫无问题！！！！

import { NavBar } from 'antd-mobile'
import { Icon } from 'antd-mobile'
// 引入`babel-plugin-import` 设置 `.babelrc`

我找到一个问题，希望对你有帮助吧
发现你是这么使用的include: /node_modules/，我在win上没有问题，mac上就出现报错了，你试试改成path.resolve(__dirname, "node_modules")

timzaak · 2017-04-12T08:41:51Z

@deot
import { NavBar } from 'antd-mobile' 是引用整个antd-mobile的资源了。属于全部引用。
import NavBar from 'antd-mobile/lib/nav-bar' 只是引用nav-bar相关的资源，属于按需引用。

按需引用的原因是：压缩单个页面所需js资源大小，这对移动开发比较重要。目前我司要一个页面加载出来，需要下载接近1M大小的bundle.js。特恐怖。
全部引用可以在做web后台的时候这么搞。毕竟用户少。

deot · 2017-04-12T09:58:54Z

@timzaak 吓的我去检查了下代码；我确定我的项目没有引入全部资源，我觉得你可能少用了引入babel-plugin-import
设置 .babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "plugins": [
    [
      "import",
      [
        {
          "libraryName": "antd",
          "style": true
        },
        { 
          "libraryName": "antd-mobile",
          "style": true
        }
      ]
    ]
  ]
}

可以无视antd；我项目同时管理mobile和pc

gooddaddy · 2017-04-12T14:46:34Z

在 2017年4月12日，上午10:19，timzaak ***@***.***> 写道： @deot <https://github.com/deot> 尝试后，发现不行。报错 ERROR in ./~/normalize.css/normalize.css Module parse failed: /${project_path}/node_modules/normalize.css/normalize.css Unexpected token (13:5) You may need an appropriate loader to handle this file type. 将 css|less改成 less。也还是不行。估计是因为我的是按需加载。导致只要项目中没引入的东西，就不会编译进去。 @gooddaddy <https://github.com/gooddaddy> 你可以参考下：http://git.oschina.net/timzaak/graphql-web-mobile-starter/blob/master/internals/webpack/webpack.base.babel.js?dir=0&filepath=internals%2Fwebpack%2Fwebpack.base.babel.js&oid=b2dae485d90abaa4cb44bfe22f556f884d9a2c68&sha=ccf4e4b98e32e9056c3fcfabdad92ad1a9fea71c <http://git.oschina.net/timzaak/graphql-web-mobile-starter/blob/master/internals/webpack/webpack.base.babel.js?dir=0&filepath=internals%2Fwebpack%2Fwebpack.base.babel.js&oid=b2dae485d90abaa4cb44bfe22f556f884d9a2c68&sha=ccf4e4b98e32e9056c3fcfabdad92ad1a9fea71c> 这是我copy react-boilerplate项目配置，并根据自己需求改的。另外，我发现你引入了整个ant_design_mobile，如果这样的话，我觉得你可以尝试你可以通过index.html直接引入ant_design 压缩好的文件。至于 ['import', { libraryName: 'antd-mobile', style: 'css' }]。这个在我的配置里没有用到。 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#516 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANbJ1ThqgEUgjUOdZ3hLbPsS4c7M8Ohzks5rvDSjgaJpZM4KwbGo>.

我使用的最新的 react-start-kit脚手架，它使用的是webpack2.0，里面包含了服务器渲染，以及按需加载的模块分包处理，以及公共包的抽离等，我不知道是否那一项和 ant-mobile冲突了，我尝试过很多的方式，还是提示找不到css。我使用的方式： import { Button } from 'antd-mobile’ 报错： Cannot find module 'antd-mobile/lib/button/style/css’ 官方上说的方法都试过了，都是不行。

timzaak · 2017-04-12T16:24:31Z

@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 你的问题必须看到你完整的配置才可以往下走。

paranoidjk · 2017-04-13T13:30:27Z

@timzaak
欢迎帮我们把配置方法添加到 wiki 里方便更多的用户 https://github.com/ant-design/ant-design-mobile/wiki

也可以在官方demo库里添加webpack2的demo https://github.com/ant-design/antd-mobile-samples

xmchyabi · 2017-07-25T06:46:50Z

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

paranoidjk · 2017-07-25T06:47:57Z

@xmchyabi 应该是没配置 webpack.resolve, 请看文档 https://mobile.ant.design/docs/react/introduce-cn#Web-使用方式

xmchyabi · 2017-07-25T07:04:48Z

@paranoidjk 谢谢你的回复，#516呀，官网demo这些我都有尝试去弄了，
我是用 react stater kit 脚手架，里面是 webpack 2.x的。
也仍是报那个错误，你是否官方有 webpack 2.x的配置方法吗。

yutucc · 2017-08-16T03:14:17Z

需要注意三点：
.babelrc中需要加 "import",（见下面）

{
    "presets": [
        "react",
        "es2015",
        "stage-0"
    ],
    "plugins": [
        "transform-object-rest-spread",
        "transform-do-expressions",
        [
            "import",
            {
                "style":"css",
                "libraryName": "antd-mobile"
            }
        ]
    ]
}

webpack 的svg loader（用官网的说法：Antd-Mobile 所有图标都是用 svg，需要配置 svg-sprite-loader）

{
            test: /\.(svg)$/i,
            loader: 'svg-sprite-loader',
            include: [
                require.resolve('antd-mobile').replace(/warn\.js$/, ''),  // 1. 属于 antd-mobile 内置 svg 文件
                // path.resolve(__dirname, 'src/my-project-svg-foler'),  // 自己私人的 svg 存放目录
            ]
        }

另外，最坑的是 resolve webpack1和webpack2是不同的（ps，官网上目前是webpack1的写法）

let ROOT_PATH = path.resolve(__dirname);
let APP_PATH = path.resolve(ROOT_PATH, 'app'); // 源码的目录

resolve: {
	modules: [path.resolve(ROOT_PATH, 'node_modules'), APP_PATH],
	extensions: ['.web.js', '.jsx', '.js', '.json'],
},

关于ant design mobile的例子

meetflyings · 2017-09-08T02:55:01Z

@timzaak 能不能给个完整的配置create-react-app栗子？？？

aromameng · 2017-09-29T02:17:15Z

我的样式都是px显示而不是rem，这个是什么原因导致的？

kaibeen · 2017-10-10T15:07:11Z

@CocoChen917 https://github.com/ant-design/antd-mobile-samples 里面有啊

warmhug closed this as completed Nov 29, 2016

paranoidjk mentioned this issue Apr 11, 2017

我使用的是react 为什么老提示我 react-native #1119

Closed

paranoidjk mentioned this issue Jun 27, 2017

Error:Cannot fund module 'antd-mobile/lib/nav-bar/style #1482

Closed

begoat mentioned this issue Jul 5, 2017

关于拓展外部antd-mobile组件作为自定义组件 ascoders/gaea-editor#9

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

webpack2 ant-design-mobile error #516

webpack2 ant-design-mobile error #516

fengyun2 commented Nov 12, 2016

warmhug commented Nov 12, 2016

fengyun2 commented Nov 12, 2016

warmhug commented Nov 12, 2016

fengyun2 commented Nov 12, 2016 •

edited

Loading

warmhug commented Nov 29, 2016

ibufu commented Mar 17, 2017

timzaak commented Mar 23, 2017

paranoidjk commented Mar 23, 2017

timzaak commented Mar 24, 2017

paranoidjk commented Mar 24, 2017

timzaak commented Mar 24, 2017

yesmeck commented Mar 24, 2017

timzaak commented Mar 24, 2017

deot commented Mar 25, 2017 •

edited

Loading

timzaak commented Mar 27, 2017 •

edited

Loading

deot commented Mar 27, 2017 •

edited

Loading

gooddaddy commented Apr 11, 2017 •

edited

Loading

himStone commented Apr 12, 2017

timzaak commented Apr 12, 2017 •

edited

Loading

deot commented Apr 12, 2017

timzaak commented Apr 12, 2017

deot commented Apr 12, 2017

timzaak commented Apr 12, 2017

deot commented Apr 12, 2017 •

edited

Loading

gooddaddy commented Apr 12, 2017 via email

timzaak commented Apr 12, 2017 •

edited

Loading

paranoidjk commented Apr 13, 2017

xmchyabi commented Jul 25, 2017

paranoidjk commented Jul 25, 2017

xmchyabi commented Jul 25, 2017

yutucc commented Aug 16, 2017

meetflyings commented Sep 8, 2017

aromameng commented Sep 29, 2017

kaibeen commented Oct 10, 2017

webpack2 ant-design-mobile error #516

webpack2 ant-design-mobile error #516

Comments

fengyun2 commented Nov 12, 2016

本地环境

你做了什么？

你期待的结果是：

实际上的结果：

warmhug commented Nov 12, 2016

fengyun2 commented Nov 12, 2016

warmhug commented Nov 12, 2016

fengyun2 commented Nov 12, 2016 • edited Loading

warmhug commented Nov 29, 2016

ibufu commented Mar 17, 2017

timzaak commented Mar 23, 2017

paranoidjk commented Mar 23, 2017

timzaak commented Mar 24, 2017

paranoidjk commented Mar 24, 2017

timzaak commented Mar 24, 2017

yesmeck commented Mar 24, 2017

timzaak commented Mar 24, 2017

deot commented Mar 25, 2017 • edited Loading

timzaak commented Mar 27, 2017 • edited Loading

deot commented Mar 27, 2017 • edited Loading

gooddaddy commented Apr 11, 2017 • edited Loading

himStone commented Apr 12, 2017

timzaak commented Apr 12, 2017 • edited Loading

deot commented Apr 12, 2017

timzaak commented Apr 12, 2017

deot commented Apr 12, 2017

timzaak commented Apr 12, 2017

deot commented Apr 12, 2017 • edited Loading

gooddaddy commented Apr 12, 2017 via email

timzaak commented Apr 12, 2017 • edited Loading

paranoidjk commented Apr 13, 2017

xmchyabi commented Jul 25, 2017

paranoidjk commented Jul 25, 2017

xmchyabi commented Jul 25, 2017

yutucc commented Aug 16, 2017

meetflyings commented Sep 8, 2017

aromameng commented Sep 29, 2017

kaibeen commented Oct 10, 2017

fengyun2 commented Nov 12, 2016 •

edited

Loading

deot commented Mar 25, 2017 •

edited

Loading

timzaak commented Mar 27, 2017 •

edited

Loading

deot commented Mar 27, 2017 •

edited

Loading

gooddaddy commented Apr 11, 2017 •

edited

Loading

timzaak commented Apr 12, 2017 •

edited

Loading

deot commented Apr 12, 2017 •

edited

Loading

timzaak commented Apr 12, 2017 •

edited

Loading