Conflicting peer dependency warnings in Next13

Issues
1

Anyone other codegen users getting a bunch of conflicting peer dependency warnings when running npm install in Next13? I know I’m in experimental territory but curious if these warning are a common/known thing or if my setup is misconfigured. Thanks.

2

It looks all to be related to ant-design and react-dom. Here is the first ~30% of the warnings that get spit out for reference:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-sortable-hoc@2.0.0
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   peer react@">=16.0.0" from @ant-design/cssinjs@1.8.1
npm WARN   node_modules/@ant-design/cssinjs
npm WARN     @ant-design/cssinjs@"^1.5.6" from @ant-design/pro-provider@2.7.0
npm WARN     node_modules/@ant-design/pro-provider
npm WARN     1 more (antd)
npm WARN   117 more (@ant-design/icons, @ant-design/pro-card, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.3.0 || ^17.0.0" from react-sortable-hoc@2.0.0
npm WARN node_modules/@ant-design/pro-table/node_modules/react-sortable-hoc
npm WARN   react-sortable-hoc@"^2.0.0" from @ant-design/pro-table@3.6.1
npm WARN   node_modules/@ant-design/pro-table
npm WARN 
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.3.0 || ^17.0.0" from react-sortable-hoc@2.0.0
npm WARN   node_modules/@ant-design/pro-table/node_modules/react-sortable-hoc
npm WARN     react-sortable-hoc@"^2.0.0" from @ant-design/pro-table@3.6.1
npm WARN     node_modules/@ant-design/pro-table
{ ... }
3

Cc @jason

4

Hey @evocative_gorilla, it doesn’t look like those dependencies warnings are coming from Plasmic, since @plasmicapp/loader-nextjs doesn’t depend on any of your listed packages (see Bundlephobia). Maybe you could share your package.json to see what’s going on?

5

@jason Hmm. I’m not using loader-nextjs anywhere in my project. I am using the codegen method exclusively. Here are my dependancies in my package.json:

 "dependencies": {
    "@ant-design/icons": "^5.0.1",
    "@ant-design/pro-components": "^2.4.4",
    "@clerk/nextjs": "^4.15.0",
    "@plasmicapp/react-web": "^0.2.195",
    "@plasmicpkgs/antd5": "^0.0.45",
    "@plasmicpkgs/plasmic-rich-components": "^1.0.53",
    "@types/node": "18.15.11",
    "@types/react": "18.0.33",
    "@types/react-dom": "18.0.11",
    "@upstash/qstash": "^0.3.6",
    "@upstash/ratelimit": "^0.4.1",
    "@upstash/redis": "^1.20.2",
    "next": "^13.3.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.0.4"
  }
6

Ah gotcha. Looks like react-sortable-hoc is giving you the problems. Its package.json has a peer dependency for React that doesn’t include React 18. The package owner suggests switching to dnd-kit instead.

7

So what’s your suggested fix for me considering that react-sortable-hoc was installed by the Plasmic CLI and I assume necessary for the rich table component?

8

Sorry didn’t notice you were using codegen and the dependencies were added for you.

It looks like our @ant-design/pro-components package depends on react-sortable-hoc. There’s an issue on the asking the maintainers to update to dnd-kit, but it doesn’t look like they’re actively doing that yet.

I looked into why react-sortable-hoc doesn’t support React 18, and it’s because findDOMNode is deprecated (but not yet removed) in React 18. Therefore, I think it should be safe to ignore the warning for now, and hopefully @ant-design/pro-components migrates before they actually remove the API.

9

Thank you!