antd 弹窗无法定位

[qfkobe24]

提示：使用antd + umi 引入插件都可以正常跳转vscode，但ant modal无法被定位

插件版本

code-inspector-core-0.14.2

Bug 类型

• [x] 其他问题

Bug 描述

umi.config.js export default defineConfig({ publicPath: historyType === 'hash' ? './' : '/', devtool: 'eval-cheap-module-source-map', chainWebpack(memo) { memo.plugin('code-inspector-plugin').use( codeInspectorPlugin({ bundler: 'webpack', hideDomPathAttr: true, }) ); }, });

系统

• [x] mac

  你使用的打包器及版本

• [ x] umijs

你使用的 web 框架

• [x] react

自检信息

• [x] 你的浏览器、IDE、代码是否在一台机器上(非远程开发机或者云开发机情况)

• [x] 浏览器控制台是否有打印组合按键提示信息
  

  

• [x] 页面 DOM 是否有注入 data-insp-path 属性
  

  

[zh-lx]

仅支持 jsx 语法的弹窗，你的 modal 是写在 jsx 中的还是静态方法调用的？

[tianyingchun]

文件路径的准确性, 可以参考 babel-react-preset 对 source 组件级别的定位.

https://github.com/babel/babel/blob/main/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts

就更完美了.

[tianyingchun]

比如 import { Image } from 'antd'

<Image src="" / > 这个时候 image 无法定位. https://react-dev-inspector.zthxxx.me/docs/compiler-plugin 这个插件可以,

除了此问题, 此插件模式很不错.

[zh-lx]

文件路径的准确性, 可以参考 babel-react-preset 对 source 组件级别的定位.

https://github.com/babel/babel/blob/main/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts

就更完美了.

这个是专门给 react 官方做 jsx 转换的，会将 jsx 转换成 js，而我们的插件只能做 jsx 增强，不能去转换成 js，不然会影响用户原有的打包逻辑

[zh-lx]

比如 import { Image } from 'antd'

<Image src="" / > 这个时候 image 无法定位. https://react-dev-inspector.zthxxx.me/docs/compiler-plugin 这个插件可以,

除了此问题, 此插件模式很不错.

这个我看一下

[tianyingchun]

此外: data-insp-path 在 next.js , html级别 不能 隐藏.

[zh-lx]

此外: data-insp-path 在 next.js , html级别 不能 隐藏.

跟级别无关，SSR 模式下暂时就不要设置 hideDomPathAttr: true 了，插件暂时无法兼顾 SSR 场景下的这个问题