Ant-design-mobile: antd-mobile does not contain an export

[yarnball]

Version

1.1.3

Environment

react (web browsers)

Reproduction link

https://codesandbox.io/s/013KDJPN

Steps to reproduce

1. I've run npm install antd-mobile --save on a new project
2. I've imported the following code:

import React, { Component } from 'react';
import { Button } from 'antd-mobile';

class HomePage extends Component {
  render() {
    return (
          <Button type="primary">test</Button>
    );
  }
}

export default HomePage;

What is expected?

That I see the antd-mobile elements

What is actually happening?

It cannot import elements from 'antd-mobile'

[paranoidjk]

https://mobile.ant.design/docs/react/introduce#Web-usage

[yarnball]

Not using webpack, was created using create-react-app. Is there a work around?

[paranoidjk]

https://ant.design/docs/react/use-with-create-react-app

[yarnball]

Thanks.

I want to help out, so I'll make a guide. Here are my steps so far (using NPM, not yarn).

1. create-react-app demo
2. npm install antd-mobile --save
3. npm install babel-plugin-import --save-dev
4. npm run eject
5. Add this to webpack.config.dev.js contents to

  resolve: {
  modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')],
  extensions: ['', '.web.js', '.js', '.json'],
},

The above did not work (still tells me: 'antd-mobile' does not contain an export named x). How do I set it up correctly?

[paranoidjk]

@yarnball can you push you code to github, and give me the repo url so that i can debug ?

[yarnball]

Sure, I've just pushed it to my repo. https://github.com/yarnball/antd-mobile-create-react-app

[paranoidjk]

you have too many problem in your configuration.

• first: resolve is duplicated https://github.com/yarnball/antd-mobile-create-react-app/blob/master/config/webpack.config.dev.js#L60
• second: you haven't set babel-plugin-import

please read https://ant.design/docs/react/use-with-create-react-app at first.

and trace our document update at https://github.com/ant-design/ant-design-mobile/issues/1362

[paranoidjk]

@yarnball https://github.com/yarnball/antd-mobile-create-react-app/pull/1

[yarnball]

Ok, I no longer get the import error. However, the elements to not appear correctly. There is no styling applied to any of the elements. The babel-plugin is set (here https://github.com/yarnball/antd-mobile-create-react-app/blob/master/config/webpack.config.dev.js#L115), and the resolve in webpack config is fixed.

[paranoidjk]

try style: css https://github.com/yarnball/antd-mobile-create-react-app/blob/master/config/webpack.config.dev.js#L127 if you do not use less-loader

can you read the doc first ? https://github.com/ant-design/babel-plugin-import#style

[yarnball]

Great- thanks so much for the hard work on this. I'm updating a detailed readme which will help other users using the new CRA with Webpack 2.

It works- but everything very large/scaled (such as fonts and elements). They do not look like the demo page. Any ideas?

EDIT: I have read the doc, but I may have missed something here so apologies,

[paranoidjk]

I won't give you answer since you still haven't read our doc.

https://mobile.ant.design/docs/react/introduce#Usage

[ant-design-bot]

Hello @yarnball, we use GitHub issues to trace bugs or discuss plans of Ant Design. So, please don't ask usage questions here. You can try to ask questions on Stack Overflow or Segment Fault, then apply tag antd and react to your question.

[yarnball]

Ok cheers, I posted on Stack overflow https://stackoverflow.com/questions/44158244

[paranoidjk]

did you see Use HD program settings, see https://github.com/ant-design/ant-design-mobile/wiki/HD for details. in https://mobile.ant.design/docs/react/introduce#Usage ....

all this problem's answer are list in the usage doc.

[yarnball]

Yep I read that- in my index.html I have:

  <script>
  if(!window.Promise) {
  document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
  </script>

[paranoidjk]

There is nothing with promise.

https://github.com/ant-design/ant-design-mobile/wiki/HD

[yarnball]

Sorry maybe its a problem with the translation of the google docs- but none of those solutions have worked. Is there an explicit solution?

This did not help:

 let isMobile = false; if ((/android/i).test(navigator.userAgent) || (/iphone|ipad/i).test(navigator.userAgent)) { const meta = document.querySelector('meta[name="viewport"]'); const content = (meta as any).content; if (!(/initial-scale=1,/g.test(content))) { isMobile = true; } } DPR = isMobile ? (window.devicePixelRatio || 1) : 1, 

[paranoidjk]

@yarnball sorry, I thought you are chinese.

You need to add below javascript code at your html header. Since antd-mobile use rem, so we rely on font-size of html.

'use strict';

/**
 * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;
 * @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;
 */
const win = window;
export default win.flex = (baseFontSize, fontscale) => {
  const _baseFontSize = baseFontSize || 100;
  const _fontscale = fontscale || 1;

  const doc = win.document;
  const ua = navigator.userAgent;
  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
  const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
  let dpr = win.devicePixelRatio || 1;
  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
    // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
    dpr = 1;
  }
  const scale = 1 / dpr;

  let metaEl = doc.querySelector('meta[name="viewport"]');
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    doc.head.appendChild(metaEl);
  }
  metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
  doc.documentElement.style.fontSize = `${_baseFontSize / 2 * dpr * _fontscale}px`;
};
flex(100, 1);

I will translate this doc into english tomorrow.

[yarnball]

Great. If I can help with the translation, let me know. The above sample in my header tells ReferenceError: scale is not define. Where do I need to define that from?

[paranoidjk]

@yarnball in your html file header, for example : https://github.com/ant-design/antd-mobile-samples/blob/master/web-webpack/index.html#L7

[yarnball]

Great- it works! Last question, do I need to manually have the <script type='application/javascript' src='/path/to/fastclick.js'></script> for fast click? Or is it already in the package?

[paranoidjk]

It dependens on whether you need to compatible with lower version of android / ios which have the problem called 300ms click delay.

You can simply add this https://github.com/ant-design/antd-mobile-samples/blob/master/web-webpack/index.html#L22

[mozillo]

Same issue occurred when I executed "yarn build"

$ node scripts/build.js
Creating an optimized production build...
Failed to compile.

./src/mobile/callback.js
80:28-38 'antd-mobile' does not contain an export named 'WhiteSpace'.

error Command failed with exit code 1.