Nextjs 项目引入 Antd-mobile 的 Form 组件报错

[iiDestiny]

Version of antd-mobile

^2.3.3

Operating system and its version

Others

Browser and its version

Chrome

Sandbox to reproduce

No response

What happened?

引入 Form 组件得到错误

Module not found: Can't resolve 'antd-mobile/lib/form'

我的 package.json

{
  "name": "www.mmogah.club",
  "author": "@erikdstock",
  "license": "MIT",
  "version": "1.0.0",
  "scripts": {
    "dev": "cross-env NODE_ENV=development PORT=3000 node server.js",
    "prod": "cross-env NODE_ENV=production PORT=4000 node server.js",
    "prebuild": "rimraf dist",
    "build": "mkdir dist && next build",
    "postbuild": "node ./build/copy-files",
    "start": "cross-env NODE_ENV=production && next start",
    "deploy": "pm2 deploy ecosystem.json production",
    "type-check": "tsc --pretty --noEmit",
    "format": "prettier --write **/*.{js,ts,tsx}",
    "lint": "eslint . --ext ts --ext tsx --ext js",
    "deploy-setup": "pm2 deploy production setup ",
    "test": "jest",
    "test-all": "yarn lint && yarn type-check && yarn test"
  },
  "lint-staged": {
    "*.@(ts|tsx)": [
      "yarn lint",
      "yarn format"
    ]
  },
  "dependencies": {
    "@babel/plugin-proposal-decorators": "^7.10.4",
    "@google-pay/button-react": "^3.0.0",
    "@types/node": "^13.13.16",
    "@types/react": "^16.9.27",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "antd": "^4.4.0",
    "antd-img-crop": "^3.13.1",
    "antd-mobile": "^2.3.3",
    "autoprefixer": "^9.8.6",
    "axios": "^0.19.2",
    "babel-plugin-import": "^1.13.0",
    "classnames": "^2.3.1",
    "collect.js": "^4.29.0",
    "cookieparser": "^0.1.0",
    "cross-env": "^7.0.2",
    "enquire-js": "^0.2.1",
    "express": "^4.17.1",
    "http-proxy-middleware": "^1.3.0",
    "immutable": "^4.0.0-rc.12",
    "js-cookie": "^2.2.1",
    "less": "^2.7.3",
    "less-loader": "^6.1.3",
    "less-vars-to-js": "^1.3.0",
    "mathjs": "^9.2.0",
    "mini-css-extract-plugin": "^2.5.3",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.33",
    "next": "^10.1.3",
    "next-compose-plugins": "^2.2.0",
    "next-i18next": "^7.0.1",
    "next-redux-wrapper": "^7.0.2",
    "next-seo": "^4.17.0",
    "node-sass": "^4.14.1",
    "nookies": "^2.5.2",
    "nprogress": "^0.2.0",
    "null-loader": "^4.0.0",
    "postcss-px2rem-exclude": "0.0.6",
    "postcss-pxtorem": "^5.1.1",
    "rc-banner-anim": "^2.4.4",
    "rc-queue-anim": "^1.8.5",
    "rc-scroll-anim": "^2.7.4",
    "rc-tween-one": "^2.7.2",
    "react": "^16.13.1",
    "react-country-region-selector": "^3.2.0",
    "react-dom": "^16.13.1",
    "react-phone-number-input": "^3.1.25",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.3.0",
    "rosetta": "^1.1.0",
    "sass": "^1.26.10",
    "sass-loader": "^10.1.1",
    "swiper": "^6.8.4",
    "typescript": "^3.8.3",
    "webpack": "^4.46.0",
    "webpack-filter-warnings-plugin": "^1.2.1"
  },
  "devDependencies": {
    "@testing-library/react": "^10.0.1",
    "@types/jest": "^25.1.4",
    "@types/js-cookie": "^2.2.7",
    "@types/react-dom": "^17.0.9",
    "@types/react-phone-number-input": "^3.0.10",
    "@types/react-redux": "^7.1.18",
    "@types/testing-library__react": "^10.0.0",
    "@typescript-eslint/eslint-plugin": "^4.1.0",
    "@typescript-eslint/parser": "^4.1.0",
    "babel-jest": "^25.2.3",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^4.2.3",
    "jest": "^25.2.3",
    "jest-watch-typeahead": "^0.5.0",
    "lint-staged": "^10.0.10",
    "prettier": "^2.0.2",
    "redux-devtools-extension": "^2.13.9"
  }
}

我的 .babelrc

{
    "presets": ["next/babel"], //next/babel next内置的模块，脚手架自带无需安装
    "plugins": [
        // @babel/plugin-proposal-decorators 这个插件,同时启用装饰器
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ],
        [
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "lib",
                "style": true //这个改成ture，就可以使用less编译了，同时也能更改主题
            },
            "ant"
        ],
        [
            "import",
            { "libraryName": "antd-mobile", "libraryDirectory": "lib" },
            "antd-mobile"
        ]
    ]
}

Relevant log output

Module not found: Can't resolve 'antd-mobile/lib/form'

[miracles1919]

你用的是老版本的，目前最新的版本 v5.0.0-rc.27

npm install --save antd-mobile@next
# or
yarn add antd-mobile@next