react-component / util Goto Github PK

WARNING Compiled with 1 warnings 10:12:06

warning in ./node_modules/rc-util/es/React/render.js

export 'createRoot' (imported as 'ReactDOM') was not found in 'react-dom' (possible exports: __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, createPortal, findDOMNode, flushSync, hydrate, render, unmountComponentAtNode, unstable_batchedUpdates, unstable_createPortal, unstable_renderSubtreeIntoContainer, version)

The CommonJS plugin for Rollup doesn't seem to like destructured imports like:

import { isFragment } from 'react-is';

Using a named import or default import fixes this issue:

import * as ReactIs from 'react-is'; // or
import ReactIs from 'react-is';

When using tools like pika, we don't have direct control over the commonjs plugin so we can't configure named exports on react-is.

See relevant issues:

• FredKSchott/pika-pack-builders#34
• mui/material-ui#18791

I have a question...
What is es?

import toArray from 'rc-util/lib/Children/toArray';
请问为什么不直接用React.Children.toArray？

after update to antd to 4.13.0, it looks like rc-util has been updated from "^5.7.0" to "^5.8.1" and now i'm getting this error

Cannot find module 'rc-util/lib/isMobile' from 'StepHandler.js'
      at Resolver.resolveModule (node_modules/jest-runtime/node_modules/jest-resolve/build/index.js:259:17)
      at Object.<anonymous> (node_modules/rc-input-number/lib/StepHandler.js:20:40)

please advice.

"*" version is wrong peer dependency for react library and a bad tone (for example some tools like microsoft rush gives Error about using peer dependencies like this)

if (!isVisible || instance._component || isVisible(instance)) {

是不是应该是：

if (isVisible===true || !instance._component || isVisible(instance)) {

if (!this.attachToParent()) {
this.rafId = raf(() => {
this.forceUpdate();
});
}

I saw a few answers to update my version, currently I have 4.18.5 and still facing this issue.

Could we change this here somehow? (by not using findDOMNode)

Warning about deprecated findDOMNode usage

Usage

switchScrollingEffect.js 中的isBodyOverflowing方法，在下面一种场景中有点欠缺：

  在全局的body的样式上增加了overflow-y:scroll,至于为什么要加，原因是想解决左侧菜单栏切换，右侧对应的内容有无溢出不会出现页面抖动的问题。
  例如：https://preview.pro.ant.design/dashboard/analysis
  从分析页面到异常页403，右侧内容就会因为滚动条的原因抖动。

  如果把这个样式设置到html 上，虽然没上述问题，但是在结合弹框Modal 使用时，就会出现弹框的遮罩层遮不住滚动条，也有点不合适。

  在上面这种场景下，isBodyOverflowing期望是被返回true 的。

Originally posted by @yangdongMC in #65 (comment)

Remove babel runtime from dependencies as it's not actually being used
@babel/runtime

it's causing issues with rollup/esbuild
storybookjs/builder-vite#143

在src/getScrollBarSize.tsx中

...
if (widthContained === widthScroll) {
    widthScroll = outer.clientWidth;
}
...

的这个判断，按照上下文创建的 DOM 感觉不会触发呀，请教什么情况下会触发？

https://github.com/react-component/util/blob/master/src/Dom/class.js#L6

改用 node-deep-equal 如何？

Hi
I got this error in when i click the Modal popup event .
I thick this problem come from the latest package of 'rc-util'.
if (!windowIsUndefined && this.getParent() === document.body) { // 离开时不会 render， 导到离开时数值不变，改用 func 。。 openCount = visible && openCount ? openCount - 1 : openCount; }
path: node_modules/rc-util/es/PortalWrapper.js

how you fixed this?
i got the same issue on Liver server and local.
any idea to fix this problem.

Environment

"antd": "^4.1.2",
"react": "^16.13.1",
System - Ubuntu 18.04.3 LTS
Browser - Version 79.0.3945.130 (Official Build) (64-bit)

这里为什么要加这么一个判断，如果修改的值变成和默认值一样，这个函数就不执行了。是为了解决哪个问题？

我的项目依赖一个三方包，这个包依赖了 rc-util，里面是这样用的：

const addEventListener = require('rc-util/lib/Dom/addEventListener');
...
addEventListener(window, 'resize', this.resize);

rc-util 4.9.0 版本做了什么？4.88 还能正常运行，4.9.0 版本就报错 Uncaught (in promise) TypeError: addEventListener is not a function

我没法改这个三方包，还请看看 rc-util 4.9.0 是否改出问题了。

This is useful for filter out react unknown props then safely pass to dom element.

styled-components/utils/validAttr.js is a good example.

Use {}.hasOwnProperty replace Array.indexOf. It's boost more than 10x faster.

问题如题所述

复现案例

https://stackblitz.com/edit/vitejs-vite-zdg5hc?file=src%2FApp.tsx
请看案例中 dist/assets/index.57005310.js 文件中 7356-7467 代码行

期待行为：

正常来说生产代码不应该包含警告（console.log/console.warn/console.error）等不影响项目执行的代码

造成问题的原因:

// 源码实现如下(只是列出部分代码)
export function warning(valid, message) {
  if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {
    console.error(message)
  }
}

// 相比以上实现，下列实现则会在打包生产代码时移除相关代码
function noop() {}
export let warning = noop

if (process.env.NODE_ENV !== 'production') {
  warning = function () {
    if (!valid && console !== undefined) {
      console.error(message)
    }
  }
} 

另外，console !== undefined 可以移除，客户端和服务端不是都有 console 对象么？

version: 4.13.0

Why don't you release a 5.0.0 version?

I got an error message in IE 11:

Object doesn't support property or method 'prepend'"

Do you guys noticed Element.prepend not support IE 11?

Downgrade solve this problem.

rc-util version 5.0.4 (dependency of antd version 4.11.2)

Problem

Missing type declaration triggering TypeScript error on build:

ERROR in [path to app]/node_modules/rc-image/lib/Image.d.ts(2,30):
TS7016: Could not find a declaration file for module 'rc-util/lib/PortalWrapper'. '[path to app]/node_modules/rc-image/node_modules/rc-util/lib/PortalWrapper.js' implicitly has an 'any' type.
  Try `npm install @types/rc-util` if it exists or add a new declaration (.d.ts) file containing `declare module 'rc-util/lib/PortalWrapper';`

Solution

Add PortalWrapper.d.ts.

Component warnings are currently printed as errors:

In development, they show up in the console like this:

The stack traces are unnecessary. They flood our consoles and make deprecation messages themselves hard to spot.

And deprecation warnings are not errors, and they should not be displayed as such. Showing them as errors distracts developers from actually critical errors, causes unnecessary panics, makes Ant Design unpleasant to work with, and developers are more likely to ignore future deprecation notices (a cry-wolf effect).

Please use console.warn for your deprecation warnings.

I agree with #41 ✔️ ..
Use 2 license files is so confused 😕 !

In triggerChange function, why not ignore setInnerValue when value present, i.e. controlled mode. I suppose innerValue does not take any effect in controlled mode though.

In addition, it should be nice to add some logic detecting the switch controlled and uncontrolled mode, throw an error/warning as native react dose facebook/react#5821.

Not sure if I am missing some points though, if the above idea make any sense. I am glad to implement the code

Warning: React does not recognize the scrollLocker prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase scrolllocker instead. If you accidentally passed it from a parent component, remove it from the DOM element.

at PortalWrapper

这个问题在ant-design仓库提了，但是bug是在这个仓库，还需要重新提个issue吗？

复现地址：https://codesandbox.io/s/antd-reproduction-template-forked-lrnipi?file=/index.js 。

我己经改好了，提交个rp

...

Warning: Warning: React does not recognize the switchScrollingEffect prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase switchscrollingeffect instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[email protected]
[email protected]
[email protected]
[email protected]

and I'm not using ant design

rc-util v3.2.0

1a719d1

react-addons-pure-render-mixin peer-depends react@^15.1.0.

When I install rc-menu, a UNMET PEER DEPENDENCY error occured.

So, would you please remove react-addons-pure-render-mixin or add react into dependencies?

2021.5.20的更新中加入的片段

环境：
windows xp 32位
firefox 52.9 esr 32位

Ref:

function ensureSize(str: string) {
  const match = str.match(/^(.*)px$/);
  const value = Number(match?.[1]);
  return Number.isNaN(value) ? getScrollBarSize() : value;
}

export function getTargetScrollBarSize(target: HTMLElement) {
  if (typeof document === 'undefined' || !target) {
    return { width: 0, height: 0 };
  }

  const { width, height } = getComputedStyle(target, '::-webkit-scrollbar');  // 此行在Firefox中提示错误
  return {
    width: ensureSize(width),
    height: ensureSize(height),
  };
}

在firefox52.9（32位）及其以前版本（测试了51\47\46）会提示**"NS_ERROR_NOT_AVAILABLE"**的错误。
我想应该是getComputedStyle返回的CSSStyleDeclaration对象（浏览器中显示CSS2Properties）不可访问导致的。
如何修正这个问题？

5.21.5版本，执行npm install失败，提示无"@babel/runtime": "^7.18.3"这个版本 ！！

I just initiate a project with next and Ant Design and I have this error:

After install antd → [email protected] › rc-util@^4.0.4(4.8.6) (14:48:20)

Dropdown in Table throw this error:

index.js?b235:700 Uncaught TypeError: Cannot read property 'appendChild' of null
    at Object.getContainer

The above error occurred in the <Portal> component:
    in Portal (created by Trigger)
    in Trigger (created by Dropdown)
    in Dropdown (created by Context.Consumer)

StrictMode will detect unexpected side effects, getContainer is in the function component body directly, and side effects happened.

containerRef points to the second DOM instance, and the first instance becomes wild, can't be removed longer.

As a simple example (just imagine that id is the DOM):

const Test = () => {
  const id = Math.random().toString(36).slice(2);
  console.log('render', id);

  useEffect(() => {
    console.log('mount', id);
    return () => console.log('unmount', id);
  }, []);

  return null;
};

outputs:

render mwn44o9shbe
render d2qan84ldw9
mount d2qan84ldw9
unmount d2qan84ldw9
mount d2qan84ldw9

this example shows that the "unmount DOM" is the second one (NOT the first), if you trigger Portal creation repeatedly, there will be a lot of unused DOM in the document body, which leads to memory leak.

Now "licenses" field of package.json contains single "MIT" string

According to spec, the "license" (not "licenses") field should be used to specify the single "MIT" license.

So, field should be renamed "licenses" => "license" I believe.

Thanks!

Repro Steps

git clone [email protected]:ant-design/ant-design-mobile.git
cd antd-mobile
npm install
npm start

~/github/ant-design-mobile(master*) » tnpm start                                                                                                                                                                                                 jiangkai@jiangkaideMacBook-Pro

> [email protected] start /Users/jiangkai/github/ant-design-mobile
> cross-env NODE_ENV=development concurrently "cross-env DEMO_ENV=react bisheng start -c ./site/bisheng.desktop.config.js" "cross-env DEMO_ENV=preact bisheng start -c ./site/bisheng.kitchen.config.js"

[1] ts-loader: Using [email protected] and /Users/jiangkai/github/ant-design-mobile/tsconfig.json
[0]
[0] webpack: bundle build is now finished.
[0]  DONE  Compiled successfully in 9142ms10:24:37
[0]
[0]  WAIT  Compiling...10:24:37
[0]
[1]
</github/ant-design-mobile/    |''pick 5970c12d7 docs:  fix site
</github/ant-design-mobile/    |''# This is a combination of 2 commits.
[1] webpack: bundle build is now finished.
[1]  WARNING  Compiled with 2 warnings10:24:38
[1]
[1]  warning  in ./node_modules/rc-util/es/Portal.js
[1]
[1] 54:15-27 "export 'createPortal' was not found in 'react-dom'
[1]
[1]  warning  in ./node_modules/bisheng-plugin-antd/node_modules/rc-dialog/es/DialogWrap.js
[1]
[1] 8:20-32 "export 'createPortal' was not found in 'react-dom'
[1]
[1]  WAIT  Compiling...10:24:38
[1]
[0]
[0] webpack: bundle build is now finished.
[0]  DONE  Compiled successfully in -10153ms10:24:38
[0]
[1]
[1] webpack: bundle build is now finished.
[1]  WARNING  Compiled with 2 warnings10:24:39
[1]
[1]  warning  in ./node_modules/rc-util/es/Portal.js
[1]
[1] 54:15-27 "export 'createPortal' was not found in 'react-dom'
[1]
[1]  warning  in ./node_modules/bisheng-plugin-antd/node_modules/rc-dialog/es/DialogWrap.js
[1]
[1] 8:20-32 "export 'createPortal' was not found in 'react-dom'
[1]
^C

It would be better to add a condition
if (this._containter && this._container.parentNode) {
// removeChild......
}

react>=18 时：

react.development.js:1667 Uncaught TypeError: dispatcher.useId is not a function
at useId (react.development.js:1667:1)
at useId (useId.js:28:1)
at Dialog (index.js:50:21)
at renderWithHooks (react-dom.development.js:14803:1)

Problem Description

When your project contains both antd4 and old rc-component,there is compile error.

Keyword

Module not found: Error: Can't resolve 'rc-util/es/Dom/isVisible

Why Error

rc-util 5 and rc-util 4 are both used by antd4 and old rc-component

Solution

add "rc-util": "^5.3.1" to package.json

火狐23~40版本（已经测试过）下报错

[10:23:37.280] [Exception... "Out of Memory"  nsresult: "0x8007000e (NS_ERROR_OUT_OF_MEMORY)"  location: "JS frame :: debugger eval code :: WCA_evalWithDebugger :: line 1"  data: no]

使用 const { width, height } = getComputedStyle(target, '::-webkit-scrollbar'); 获取宽高时报错

project: https://github.com/orgs/react-component/projects/1/views/1

这个组件的 createContainer 放在 constructor 会不会更合理些，看目前的方案，children 一开始不会实例化，必须在 didUpdate 后处理

Hello!

I cannot install version 5.15.0.
during installation i get v.5.14.0 as the latest:
npm install rc-util@latest
+ [email protected]
updated 1 package in 22.434s

When i try to install v5.15.0, i get error:
npm install [email protected]
npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist

IE浏览器不兼容这个内容


@zombieJ

Skypack 是一个分发 ESM 模块的 CDN，我正在通过 Skypack 使用 react 和 antd 开发应用程序，但在加载 antd 模块的过程中出现了错误。

由于 rc-util 的代码中依赖了 react-dom 而没有在 package.json 中通过 peerDependencies 字段声明，Skypack 无法判断出此时如何加载 react-dom.

希望维护者可以补全 peerDependencies 字段，修复这个问题。

#138

drawer组件在销毁的时候不会重置body的style