React Flow 和 Zoom Pane 錯誤問題

Question

我在我的 React 項目中工作時遇到了一些 React Flow 問題。 我讓它在另一個項目中工作，我想將一些功能遷移到另一個項目，但是當我這樣做時，我得到以下......

Uncaught TypeError: selection.interrupt is not a function
    at zoom.transform (zoom.js:91:1)
    at slicedToArray.js:8:1
    at invokePassiveEffectCreate (react-dom.development.js:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at flushPassiveEffectsImpl (react-dom.development.js:23574:1)
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushPassiveEffects (react-dom.development.js:23447:1)
    at performSyncWorkOnRoot (react-dom.development.js:22269:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at workLoop (scheduler.development.js:417:1)
    at flushWork (scheduler.development.js:390:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157:1)
index.js:1 
        
       The above error occurred in the <ZoomPane> component:

    at ZoomPane (http://localhost:3000/static/js/61.chunk.js:3828:21)
    at FlowRenderer (http://localhost:3000/static/js/61.chunk.js:4650:23)
    at GraphView (http://localhost:3000/static/js/61.chunk.js:5460:24)
    at Provider (http://localhost:3000/static/js/61.chunk.js:9897:29)
    at Wrapper (http://localhost:3000/static/js/61.chunk.js:5836:23)
    at div
    at http://localhost:3000/static/js/61.chunk.js:5904:20
    at div
    at div
    at div
    at Card (http://localhost:3000/static/js/53.chunk.js:123322:75)
    at div
    at http://localhost:3000/static/js/53.chunk.js:128284:75
    at div
    at http://localhost:3000/static/js/53.chunk.js:128474:34
    at div
    at form
    at Form (http://localhost:3000/static/js/53.chunk.js:170528:19)
    at SizeContextProvider (http://localhost:3000/static/js/53.chunk.js:124433:23)
    at InternalForm (http://localhost:3000/static/js/53.chunk.js:127126:69)
    at AddEditForm (http://localhost:3000/78.bd17ba31b4ff8371d2e4.hot-update.js:195:86)
    at Edit (http://localhost:3000/static/js/78.chunk.js:1360:18)
    at Route (http://localhost:3000/static/js/53.chunk.js:247458:29)
    at Switch (http://localhost:3000/static/js/53.chunk.js:247660:29)
    at Index (http://localhost:3000/static/js/78.chunk.js:1941:5)
    at Route (http://localhost:3000/static/js/53.chunk.js:247458:29)
    at Switch (http://localhost:3000/static/js/53.chunk.js:247660:29)
    at Suspense
    at AppViews
    at main
    at Basic (http://localhost:3000/static/js/53.chunk.js:130693:25)
    at Adapter (http://localhost:3000/static/js/53.chunk.js:130676:79)
    at div
    at section
    at BasicLayout (http://localhost:3000/static/js/53.chunk.js:130708:76)
    at Adapter (http://localhost:3000/static/js/53.chunk.js:130676:79)
    at section
    at BasicLayout (http://localhost:3000/static/js/53.chunk.js:130708:76)
    at Adapter (http://localhost:3000/static/js/53.chunk.js:130676:79)
    at section
    at BasicLayout (http://localhost:3000/static/js/53.chunk.js:130708:76)
    at Adapter (http://localhost:3000/static/js/53.chunk.js:130676:79)
    at AppLayout (http://localhost:3000/static/js/main.chunk.js:6211:5)
    at ConnectFunction (http://localhost:3000/static/js/53.chunk.js:244507:75)
    at Route (http://localhost:3000/static/js/53.chunk.js:247458:29)
    at RouteInterceptor (http://localhost:3000/static/js/main.chunk.js:9118:5)
    at Switch (http://localhost:3000/static/js/53.chunk.js:247660:29)
    at FormProvider (http://localhost:3000/static/js/53.chunk.js:170681:31)
    at LocaleProvider (http://localhost:3000/static/js/53.chunk.js:131362:94)
    at ProviderChildren (http://localhost:3000/static/js/53.chunk.js:124715:24)
    at LocaleReceiver (http://localhost:3000/static/js/53.chunk.js:131233:94)
    at ConfigProvider (http://localhost:3000/static/js/53.chunk.js:124823:13)
    at IntlProvider (http://localhost:3000/static/js/53.chunk.js:243112:43)
    at Views (http://localhost:3000/static/js/main.chunk.js:9152:5)
    at ConnectFunction (http://localhost:3000/static/js/53.chunk.js:244507:75)
    at C (http://localhost:3000/static/js/53.chunk.js:247715:37)
    at Route (http://localhost:3000/static/js/53.chunk.js:247458:29)
    at Switch (http://localhost:3000/static/js/53.chunk.js:247660:29)
    at Router (http://localhost:3000/static/js/53.chunk.js:247089:30)
    at BrowserRouter (http://localhost:3000/static/js/53.chunk.js:246710:35)
    at ThemeSwitcherProvider (http://localhost:3000/static/js/53.chunk.js:212584:23)
    at Provider (http://localhost:3000/static/js/53.chunk.js:244218:20)
    at div
    at App (http://localhost:3000/static/js/main.chunk.js:68:97)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

我認為我之前的東西可能有某種缺陷，我在原版中有 mui，在另一個中有 ant，所以我用一個例子來測試它是否存在。 我使用了它，但沒有任何效果我仍然收到與以前相同的中斷錯誤。 我知道我已經做了一個 npm i react-flow-renderer。 我逐行復制了示例行，但仍然沒有得到任何結果。 有人有任何建議或解決方法嗎？

React 是 17.0.1 React-Flow-Renderer 是 10.3.16

兩者都與我的其他項目相同。

Answer 1

問題在於依賴項安裝的順序。

d3-selection 與 react-flow-renderer 沖突。 卸載兩者然后在 react-flow-renderer 上執行 npm i 然后 d3-selection 修復它。 如果其他人遇到這種情況，我在下面粘貼了 npm 命令

npm remove react-flow-renderer

npm remove d3-selection

npm install react-flow-renderer

npm install d3-selection