next13中from组件报错

[yangjianguo12]

Version of antd-mobile

5.32.0

Operating system and its version

No response

Browser and its version

No response

Sandbox to reproduce

No response

What happened?

"dependencies": {
"@ant-design/icons": "^5.1.4",
"antd-mobile": "^5.32.0",
"api": "",
"axios": "^1.4.0",
"common": "",
"constants": "",
"cookies-next": "^2.1.2",
"dayjs": "^1.11.8",
"eslint": "8.43.0",
"eslint-config-next": "13.4.6",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-security": "^1.7.1",
"eslint-plugin-sonarjs": "^0.19.0",
"i18next": "^23.2.8",
"next": "^13.4.1",
"next-i18next": "^14.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-i18next": "^13.0.2",
"utils": ""
},
"devDependencies": {
"@types/node": "^17.0.12",
"@types/react": "^18.0.22",
"@types/react-dom": "^18.0.7",
"@typescript-eslint/eslint-plugin": "^5.60.1",
"eslint-config-custom": "",
"prettier": "^2.8.8",
"pretty-quick": "^3.1.3",
"sass": "^1.63.5",
"tsconfig": "",
"typescript": "^4.5.3"
}
我的依赖文件

Relevant log output

mobile:dev: - error ../node_modules/antd-mobile/cjs/components/form/form.js (41:151) @ Form
mobile:dev: - error Error [TypeError]: Cannot read properties of undefined (reading 'Form')
mobile:dev:     at eval (webpack-internal:///../../node_modules/antd-mobile/cjs/components/form/form.js:79:16)
mobile:dev:     at renderWithHooks (/Users/m100448656/Documents/work/mono-test/my-turborepo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
mobile:dev:     at renderForwardRef (/Users/m100448656/Documents/work/mono-test/my-turborepo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5842:18)
mobile:dev:     at renderElement (/Users/m100448656/Documents/work/mono-test/my-turborepo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
mobile:dev:     at renderNodeDestructiveImpl (/Users/m100448656/Documents/work/mono-test/my-turborepo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
mobile:dev:     at renderNodeDestructive (/Users/m100448656/Documents/work/mono-test/my-turborepo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
mobile:dev:     at renderNode (/Users/m100448656/Documents/work/mono-test/my-turborepo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
mobile:dev:     at renderChildrenArray (/Users/m100448656/Documents/work/mono-test/my-turborepo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
mobile:dev:     at renderNodeDestructiveImpl (/Users/m100448656/Documents/work/mono-test/my-turborepo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
mobile:dev:     at renderNodeDestructive (/Users/m100448656/Documents/work/mono-test/my-turborepo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
mobile:dev:     at renderElement (/Users/m100448656/Documents/work/mono-test/my-turborepo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9)
mobile:dev:     at renderNodeDestructiveImpl (/Users/m100448656/Documents/work/mono-test/my-turborepo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
mobile:dev:     at renderNodeDestructive (/Users/m100448656/Documents/work/mono-test/my-turborepo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
mobile:dev:     at renderIndeterminateComponent (/Users/m100448656/Documents/work/mono-test/my-turborepo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)

[zombieJ]

提供一下重现看看？

[yangjianguo12]

@zombieJ 以及我跟着一切方法改了我的tsconfig文件，它现在是 `{ "extends": "tsconfig/nextjs.json", "compilerOptions": { "plugins": [ { "name": "next" } ], "strict": true, "allowJs": true, "esModuleInterop": true, "skipLibCheck": true, "noUnusedLocals": true, "noUnusedParameters": true, "resolveJsonModule": true, "isolatedModules": true, "target": "esnext", "lib": [ "dom", "dom.iterable", "esnext" ], "jsx": "preserve", "module": "esnext", "moduleResolution": "node", "noEmit": true }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "../../packages/api", "node_modules/antd-mobile" ], "exclude": [ "node_modules" ] }`

，next.config中我也配置了 transpilePackages: ["antd-mobile"],
顺便，它在编译阶段没有报错，热重载的时候也可以看见页面，但是重新进入页面就会报错

[github-actions]

Hi, yangjianguo12.

Please provide a online reproduction so that we can help you troubleshoot the problem. You can create a demo by codesandbox or stackblitz.

我们需要你提供一个在线的重现实例，以便于我们帮你排查问题。你可以通过 codesandbox 或 stackblitz 创建一个实例。

[miracles1919]

我试了下正常的，所以提供下复现的代码 or 仓库看看

[yangjianguo12]

我试了一下找到了原因，似乎是我的_app.tsx文件用了国际化组件引起的，这是我的代码，

`import "../styles/globals.css";
import type { AppProps } from "next/app";
import { appWithTranslation } from "next-i18next";
import type { Locale } from "antd-mobile/es/locales/base";
import { ConfigProvider } from "antd-mobile";
import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { Language } from "constants/common";
import enUS from "antd-mobile/es/locales/en-US";
import zhCN from "antd-mobile/es/locales/zh-CN";
import jaJP from "antd-mobile/es/locales/ja-JP";
import koKR from "antd-mobile/es/locales/ko-KR";
import zhTW from "antd-mobile/es/locales/zh-TW";

function MyApp({ Component, pageProps }: AppProps) {
// const { t } = useTranslation();
// const store = useStore((pageProps as any).initialReduxState);
const router = useRouter();
const [antLocal, setantLocal] = useState();

// useEffect(() => {
// const route = window.location.pathname;
// console.log("app中拿到的route.pathname:", route);
// const loginRoute = ["/bridge", "/bridge.html", "/login", "/login.html"];
// setNeedLayout(!loginRoute.includes(route));
// console.log("app中needlayout", !loginRoute.includes(route));
// }, [store]);
const antdLangMap = new Map<string, Locale>([
[Language.zh, zhCN],
[Language.en, enUS],
[Language.ja, jaJP],
[Language.ko, koKR],
[Language.ch, zhTW],
]);

useEffect(() => {
const lang = router.locale ?? Language.zh;
const language = antdLangMap.get(lang);
setantLocal(language);
}, [router.locale]);

return (

<Component {...pageProps} />

);
}

export default appWithTranslation(MyApp);

`

只要我去掉ConfigProvider标签才会好。。。请问可以帮忙看一下吗？

@miracles1919 @zombieJ

[miracles1919]

从你提供代码片段里，并没有消费 ConfigProvider 和 antLocal，没法排查的

请提供完整的、在线的复现实例，你可以通过 codesandbox 或 stackblitz 创建

这个 issue 我先关了，有复现实例贴出来我会继续排查

[yangjianguo12]

https://codesandbox.io/embed/gifted-meitner-kwx95c?fontsize=14&hidenavigation=1&theme=dark

@miracles1919 复现在这里。

并且我通过setDefaultConfig已经解决了这个问题，非常感谢你

[effert]

https://codesandbox.io/embed/gifted-meitner-kwx95c?fontsize=14&hidenavigation=1&theme=dark

@miracles1919 复现在这里。

并且我通过setDefaultConfig已经解决了这个问题，非常感谢你

const [antLocal, setantLocal] = useState(zhCN);
默认需要有一个语言