webpack2 ant-design-mobile error

fengyun2 commented 8 years ago

本地环境

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 commented 8 years ago

注意看文档

fengyun2 commented 8 years ago

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

warmhug commented 8 years ago

都要设置的

fengyun2 commented 8 years ago

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

warmhug commented 8 years ago

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

ibufu commented 7 years ago

@fengyun2 这个问题解决了吗

timzaak commented 7 years ago

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

paranoidjk commented 7 years ago

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

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

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

timzaak commented 7 years ago

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

paranoidjk commented 7 years ago

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

timzaak commented 7 years ago

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

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

yesmeck commented 7 years ago

看起来你们用的是 cnpm？

timzaak commented 7 years ago

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

deot commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

我使用的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 commented 7 years ago

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

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

webpack 2
React Router 4
TypeScript

timzaak commented 7 years ago

@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 commented 7 years ago

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

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

import 'normalize.css/normalize.css';

timzaak commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

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

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

deot commented 7 years ago

@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 commented 7 years ago

在 2017年4月12日，上午10:19，timzaak notifications@github.com 写道：

@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 https://github.com/ant-design/ant-design-mobile/issues/516#issuecomment-293453240, 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 commented 7 years ago

@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 commented 7 years ago

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

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

xmchyabi commented 7 years ago

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

paranoidjk commented 7 years ago

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

xmchyabi commented 7 years ago

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

yutucc commented 7 years ago

需要注意三点： .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 commented 7 years ago

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

aromameng commented 7 years ago

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

kaibeen commented 7 years ago

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

ant-design / ant-design-mobile