next.js 下无法使用 ImageViewer.show({ image: props.src || '' });

[millionbug]

Version of antd-mobile

5.38.1

Operating system and its version

No response

Browser and its version

No response

Sandbox to reproduce

No response

What happened?

next.js 下无法使用 ImageViewer.show({ image: props.src || '' });本来应该正常预览图片的，但是控制台报错了

Relevant log output

'use client';
import { Image, ImageProps, ImageViewer } from "antd-mobile";

export const ImageViewerCombine = (props: Omit<ImageProps, "onClick">) => {
  return (
       <Image
        fit="cover"
        alt="earrings"
        onClick={() => {
          ImageViewer.show({ image: props.src || '' });
        }}
        {...props}
      />
  );
};
Uncaught TypeError: reactRender is not a function
    at legacyRender (render.js:32:5)
    at render (render.js:46:5)
    at renderToBody (render-to-body.js:16:52)
    at renderImperatively (render-imperatively.js:55:82)
    at Function.showImageViewer [as show] (methods.js:17:99)
    at onClick (image-viewer-combine.tsx:14:23)
    at processDispatchQueue (react-dom-client.development.js:16035:17)
    at eval (react-dom-client.development.js:16638:9)
    at batchedUpdates$1 (react-dom-client.development.js:3103:40)
    at dispatchEventForPluginEventSystem (react-dom-client.development.js:16194:7)
    at dispatchEvent (react-dom-client.development.js:20266:11)
    at dispatchDiscreteEvent (react-dom-client.development.js:20234:11)

[zombieJ]

估计是 React 19 的问题，React 19 下 react-dom 的 render 和之前版本路径不一样。antd-mobile 静态方法不支持它。

[millionbug]

估计是 React 19 的问题，React 19 下 react-dom 的 render 和之前版本路径不一样。antd-mobile 静态方法不支持它。
我用的是 react 18.2.0 的，没有使用 react 19

{
"name": "xiaobao_store",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --port 3001",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"ahooks": "^3.8.1",
"antd-mobile": "^5.38.1",
"axios": "^1.7.7",
"clsx": "^2.1.1",
"mysql2": "^3.11.4",
"next": "15.0.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-virtualized": "^9.22.5",
"sass": "^1.80.5",
"wc-waterfall": "^0.1.3"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/react-virtualized": "^9.21.30",
"eslint": "^8",
"eslint-config-next": "15.0.2",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}

[millionbug]

解决了，antd mobile 还不支持 next.js 15 和 react 18.2.0 以后的版本

[zombieJ]

嗯，这个 issue 我先关了哈。React 19 支持要从长计议。

[millionbug]

嗯，这个 issue 我先关了哈。React 19 支持要从长计议。

但是出错的时候，我不是用的 19 而是 18.2.0.当然，我现在切到 18.0.0 和 next.js 14 后问题解决了。希望这个可以帮助你们定位问题