baidu / baidu/amis

项目用react^18.2.0,编辑器中拖动组件会警告 console.js:213 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

Open
#9,863 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feat need confirm style
Dominant language
TypeScript
Stars
18.9k
Forks
2.7k
PR merge metrics
No merged PRs in 30d

Description

描述问题:

项目用react^18.2.0,编辑器中拖动组件会警告
console.js:213 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

截图或视频:

可以的话,尽可能提供截图或视频来补充描述你的问题...

如何复现(请务必完整填写下面内容):
  1. 你是如何使用 amis 的?
    npm

  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在
    6.2.2

  3. 粘贴有问题的完整 amis schema 代码:
    任意schema都可以

{
  "type": "page",
  "body": [
    {
      "body": [
      ],
      "feat": "Insert",
      "mode": "horizontal",
      "type": "form",
      "title": "表单",
      "dsType": "api",
      "actions": [
        {
          "type": "button",
          "label": "提交",
          "level": "primary",
          "onEvent": {
            "click": {
              "actions": [
                {
                  "actionType": "submit"
                }
              ]
            }
          },
          "id": "u:a0f29d87e786"
        }
      ],
      "columnCount": 2,
      "resetAfterSubmit": true,
      "id": "u:c8c8098a4d0b"
    }
  ],
  "regions": [
    "body"
  ],
  "id": "u:55463fb710f5"
}
  1. 操作步骤
    请简单描述一下复现的操作步骤...
    将组件拖到编辑区就会出现这个提示

我项目的配置:
"dependencies": {
"@ant-design/cssinjs": "^1.18.4",
"@ant-design/icons": "^5.1.4",
"@fortawesome/fontawesome-free": "^6.1.1",
"@reduxjs/toolkit": "^1.9.5",
"amis": "6.2.2",
"amis-core": "6.2.2",
"amis-editor": "6.2.2",
"amis-editor-core": "6.2.2",
"amis-formula": "6.2.2",
"amis-ui": "6.2.2",
"antd": "^5.12.4",
"axios": "^1.4.0",
"copy-to-clipboard": "^3.3.3",
"core-js": "^3.6.5",
"lodash-es": "^4.17.21",
"mobx": "^4.5.0",
"mobx-react": "^6.3.1",
"mobx-state-tree": "^3.17.3",
"monaco-editor": "0.30.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.1.0",
"react-router-dom": "^6.13.0",
"vue": "^3.4.14"
},
"devDependencies": {
"@commitlint/cli": "^18.6.0",
"@types/node": "^15.0.1",
"@types/react": "^18.0.37",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^4.0.0",
"amis-widget-cli": "^3.2.0",
"autoprefixer": "^10.4.18",
"commitlint-config-ali": "^1.0.0",
"eslint": "^8.56.0",
"eslint-config-ali": "^15.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-import-resolver-node": "^0.3.9",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-prettier": "^5.0.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"husky": "^8.0.0",
"lint-staged": "^15.2.2",
"patch-package": "^8.0.0",
"postcss": "^8.4.35",
"prettier": "^3.1.1",
"prettier-config-ali": "^1.0.0",
"sass": "^1.63.6",
"stylelint": "^16.0.2",
"stylelint-config-ali": "^2.1.0",
"stylelint-prettier": "^5.0.0",
"tailwindcss": "^3.4.1",
"typescript": "^5.1.3",
"vite": "^4.3.9",
"vite-plugin-monaco-editor": "^1.1.0",
"vite-plugin-qiankun": "^1.0.15"
}

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the warning by using amis 6.2.2 with React and ReactDOM 18.2.0, then drag any component into the editor. Search the editor and related frontend entry points for the ReactDOM.render call involved in that interaction. Done means dragging components no longer emits the React 18 warning while the editor behavior remains unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.