通过CDN引入使用pro-components，在组件中出现报错：Cannot read properties of null (reading 'useRef')🧐[问题]

CAIyb7923 commented 11 months ago

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🧐 问题描述

我设置externals在打包时排除@ant-design/pro-components： externals: { react: 'React', 'react-dom': 'ReactDOM', '@ant-design/pro-components': 'ProComponents', }, ，直接在页面上通过cdn引入对应的js: <script src="https://unpkg.com/@ant-design/pro-components@2.5.1/dist/pro-components.min.js"></script> ，但是在页面上加载EditableProTable组件时，出现了报错：Cannot read properties of null (reading 'useRef')。

💻 示例代码

页面引入组件的方式： import { EditableProTable, useRefFunction, ProFormSelect } from '@ant-design/pro-components';

出现报错似乎是useRefFunction导致的，这个方法用在EditableProTable的columns定义里： `const columns = [ { title: '操作', render: (dom, record, index, action) => { return [ <a key="delete" onClick={() => { removeRow(record); }}

删除 , ]; }, }, ];

const removeRow = useRefFunction((record) => { // Do something });`

🚑 其他信息

github-actions[bot] commented 11 months ago

以下的 Issues 可能会帮助到你 / The following issues may help you

[#7015][🐛[BUG] 列设置关闭弹框时报错 not read properties of null (reading 'contains')][63%]

CAIyb7923 commented 11 months ago

补充一下，react和react-dom的js已经在pro-components之前加载了

myzhoulang commented 11 months ago

我也遇到这个问题了不用CDN 直接将procomponents 打包就正常

myzhoulang commented 11 months ago

在使用cdn的方式加载 pro-components时，使用 2.3.52 版本是正常的，超过这个版本会报错

CAIyb7923 commented 11 months ago

确实，按照上一楼同学的描述，我分别按照下面的方式去引入: 这样是不会报错的，而如果用pro-components更新一些的版本：就会报标题描述的错误。

CAIyb7923 commented 11 months ago

从2.3.52版本的components.min.js升级为2.3.53版本之后的pro-components.min.js就会出错，而且一直到最新版本都会报错

CAIyb7923 commented 11 months ago

对于2.3.53之后的版本，是否可以在文档里给出一个有关cdn引入的最佳实践呢？

chenshuai2144 commented 10 months ago

@PeachScript 大佬是不是要特殊配置一下 react？

nmchgx commented 10 months ago

cdn方式引入2.6.4版本也会有类似报错，打包到项目里就不会有报错

<script
  crossorigin
  src="https://registry.npmmirror.com/@ant-design/pro-components/2.6.4/files/dist/pro-components.min.js"
></script>

handwill commented 9 months ago

同遇到这个问题

nmchgx commented 9 months ago

@chenshuai2144 您好，请问这个问题有解决办法吗，看起来是打包的问题

chenshuai2144 commented 8 months ago

react 要在之前引用，我看了下配置了react引用是可以用的

nmchgx commented 8 months ago

@chenshuai2144 试了一下最新的2.6.16依然会有这个问题，辛苦再检查一下打包相关配置，麻烦提供一个CDN引入的最佳实践

chenshuai2144 commented 8 months ago

新版本已经可以了，试试 2.6.17，记得最前面加载react。

另外我们只有 pro-components 才支持umd别的不支持

nmchgx commented 7 months ago

@chenshuai2144 试了一下最新的2.6.20会有新的问题，麻烦再看一下

chenshuai2144 commented 7 months ago

我试了一下没有问题。你搞个网页出来吧，。看起来是什么不兼容

nmchgx commented 7 months ago

@chenshuai2144 您好，我写了一个demo，辛苦本地试一下

https://github.com/nmchgx/demo-pro-components

pnpm i && pnpm run build && pnpm run preview

nmchgx commented 7 months ago

@chenshuai2144 请问这个问题定位原因了吗

ant-design / pro-components