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

millionbug commented 3 days ago

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 commented 3 days ago

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

millionbug commented 2 days ago

估计是 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 commented 2 days ago

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

zombieJ commented 2 days ago

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

millionbug commented 2 days ago

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

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

ant-design / ant-design-mobile