引入Form报错

[charminghiker]

Version of antd-mobile

rc16

Operating system and its version

No response

Browser and its version

No response

Sandbox to reproduce

No response

What happened?

报错：Module not found: Can't resolve 'antd-mobile/lib/form' in XXXX

引入方式： import { Form, Input, Picker } from 'antd-mobile';

Relevant log output

No response

[charminghiker]

[awmleer]

[charminghiker]

修改后依然报错，package.json依赖如下：

 "dependencies": {
    "@alitajs/dform": "^2.2.5",
    "@ant-design/charts": "^1.1.17",
    "@ant-design/icons": "^4.0.0",
    "@ant-design/pro-descriptions": "^1.2.0",
    "@ant-design/pro-form": "^1.3.0",
    "@ant-design/pro-layout": "^6.9.0",
    "@ant-design/pro-table": "^2.43.4",
    "@umijs/route-utils": "^1.0.33",
    "antd": "^4.18.3",
    "antd-mobile": "5.0.0-rc.16",
    "classnames": "^2.2.6",
    "lodash": "^4.17.11",
    "moment": "^2.25.3",
    "omit.js": "^2.0.2",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dev-inspector": "^1.1.1",
    "react-dom": "^17.0.2",
    "react-helmet-async": "^1.0.4",
    "react-signature-canvas": "^1.0.3",
    "sha256": "^0.2.0",
    "sm-crypto": "^0.2.7",
    "umi": "3.4.25",
    "umi-request": "^1.3.5"
  },
  "devDependencies": {
    "@ant-design/pro-cli": "^1.0.28",
    "@types/express": "^4.17.0",
    "@types/history": "^4.7.2",
    "@types/jest": "^26.0.0",
    "@types/lodash": "^4.14.144",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-helmet": "^6.1.0",
    "@types/react-signature-canvas": "^1.0.2",
    "@typescript-eslint/eslint-plugin": "^4.28.2",
    "@typescript-eslint/parser": "^4.28.2",
    "@umijs/fabric": "^2.5.1",
    "@umijs/plugin-blocks": "^2.0.5",
    "@umijs/plugin-esbuild": "^1.0.1",
    "@umijs/preset-ant-design-pro": "^1.2.0",
    "@umijs/preset-react": "^2.1.1",
    "@umijs/yorkie": "^2.0.3",
    "babel-plugin-import": "^1.13.3",
    "carlo": "^0.9.46",
    "chalk": "^4.0.0",
    "cross-env": "^7.0.0",
    "cross-port-killer": "^1.1.1",
    "detect-installer": "^1.0.1",
    "enzyme": "^3.11.0",
    "eslint": "^7.1.0",
    "express": "^4.17.1",
    "gh-pages": "^3.0.0",
    "jsdom-global": "^3.0.2",
    "lint-staged": "^10.0.0",
    "mockjs": "^1.0.1-beta3",
    "prettier": "^2.0.1",
    "puppeteer-core": "^8.0.0",
    "stylelint": "^13.0.0",
    "typescript": "^4.3.5"
  },

[charminghiker]

@awmleer

[awmleer]

@charminghiker 你是不是手动配置了 babel-plugin-import？发一下你的 umi 配置？

[charminghiker]

@awmleer

----config.js
// https://umijs.org/config/
import { defineConfig } from 'umi';
import defaultSettings from './defaultSettings';
import proxy from './proxy';
import routes from './routes';
const { REACT_APP_ENV } = process.env;
export default defineConfig({
  hash: true,
  antd: {},
  dva: {
    hmr: true,
  },
  history: {
    type: 'browser',
  },
  locale: {
    // default zh-CN
    default: 'zh-CN',
    antd: true,
    // default true, when it is true, will use `navigator.language` overwrite default
    baseNavigator: true,
  },
  dynamicImport: {
    loading: '@/components/PageLoading/index',
  },
  targets: {
    ie: 11,
  },
  // umi routes: https://umijs.org/docs/routing
  routes,
  // Theme for antd: https://ant.design/docs/react/customize-theme-cn
  theme: {
    'primary-color': defaultSettings.primaryColor,
    '@alita-dform-title-font-size': '14px',
    '@alita-dform-select-font-size': '14px',
  },
  title: false,
  ignoreMomentLocale: true,
  proxy: proxy[REACT_APP_ENV || 'dev'],
  manifest: {
    basePath: '/',
  },
  // 快速刷新功能 https://umijs.org/config#fastrefresh
  fastRefresh: {},
  esbuild: {},
  extraBabelPlugins: [['import', { libraryName: 'antd-mobile', style: 'css' }]],
});

----config.dev.js
import { defineConfig } from 'umi';
export default defineConfig({
  plugins: [
    // https://github.com/zthxxx/react-dev-inspector
    'react-dev-inspector/plugins/umi/react-inspector',
  ],
  // https://github.com/zthxxx/react-dev-inspector#inspector-loader-props
  inspectorConfig: {
    exclude: [],
    babelPlugins: [],
    babelOptions: {},
  },
  webpack5: {},
});

[awmleer]

把这行配置去掉应该就可以了：

extraBabelPlugins: [['import', { libraryName: 'antd-mobile', style: 'css' }]],

[charminghiker]

@awmleer 把extraBabelPlugins注释掉可以起来了，thanks