update antd-mobile to v2

[Enalmada]

• dependencies updated to latest versions
• koubei icon gone, replaced with up
• viewport method changed from hd to meta per migration guide
• url changed to router withRouter() per next migration docs
• this.state -> setState per console deprecation notice
• Icon -> CustomIcon per antd-mobile 2x migration docs
• tiny bit of formatting intelij must have done (hope that is ok)

[HaNdTriX]

Currently there is a client/server mismatch. See console:

Warning: Prop `aria-labelledby` did not match. Server: "m-tabs-3-0" Client: "m-tabs-0-0"

[Enalmada]

@HaNdTriX Thanks for taking a look! I noticed that client/server mismatch console error but sadly have no idea how to fix. (Closest hint I could find was this post). Since this example didn't run at all when I tried it, I didn't confirm if that is an existing issue in example code or due to antd version upgrade I did. I am hoping my changes to get this thing runnable on latest next will at least avoid complete new user frustration until someone more experienced than I can push a fix for that console error.

[HaNdTriX]

Lets also use the version from the package antd-mobile for that.

See https://github.com/zeit/next-plugins/tree/master/packages/next-css

[Enalmada]

Unfortunately when I try to load in css from antd-mobile I get this error:

It looks like there has been some bug in Next in the past about this?

Any ideas why just importing css causes that error?

[HaNdTriX]

@Enalmada by the way! Thanks for this great job! 🙏

[Enalmada]

@HaNdTriX Could you try importing the css
Layout.js
import "antd-mobile/dist/antd-mobile.css"

next.config.js

const withCss = require("@zeit/next-css");
...
module.exports = withCss({ ... })

I seem to be hitting this: #1352 but I am unsure if this is a bug in Next.js or if users are required to put something in next.config.js to handle normalize.css?

[HaNdTriX]

@Enalmada I tried it but it worked with my next.config.js.

const withCss = require('@zeit/next-css')
module.exports = withCss()

What next.js version are you using?

Currently I also don't have an idea whats causing the client/server mismatch. Maybe it`s an antd-mobile issue?

[Enalmada]

@HaNdTriX I am using next 7.0.2. Looks like your example just got merged...thank you for your help getting antd-mobile example working on latest next!