Error related to RefFindNode and React 17 #4124

silviubogan · 2020-12-09T17:46:10Z

Bug Report

Steps

Clone my fork of the project on which I work: https://github.com/silviubogan/volto-slate/tree/eefee2c46c38bc7bd07e6a9681e27bebc6fc5983 into a new directory and cd into it.
Run this (fish syntax for putting output of pwd in the command):

docker run -it --rm -v (pwd):/opt/frontend/my-volto-project/src/addons/volto-slate \
                                                                           -e GIT_NAME=volto-slate \
                                                                           -e GIT_BRANCH=develop \
                                                                           -e NAMESPACE=@eeacms \
                                                                           -e DEPENDENCIES="@eeacms/volto-slate" \
                                                                           eeacms/volto-test test

Expected Result

The unit tests are passed.

Actual Result

There are some strange errors related to RefFindNode and I think they are related to React 17. I put here just the first jest test file that fails as the others present similar errors:

FAIL src/addons/volto-slate/src/editor/ui/ToolbarButton.test.js (14.107 s)
  ● Console

    console.error
      Error: Uncaught [Error: Unable to find node on an unmounted component.]
          at reportException (/opt/frontend/my-volto-project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
          at invokeEventListeners (/opt/frontend/my-volto-project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
          at HTMLUnknownElementImpl._dispatch (/opt/frontend/my-volto-project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
          at HTMLUnknownElementImpl.dispatchEvent (/opt/frontend/my-volto-project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
          at HTMLUnknownElementImpl.dispatchEvent (/opt/frontend/my-volto-project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
          at HTMLUnknownElement.dispatchEvent (/opt/frontend/my-volto-project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
          at Object.invokeGuardedCallbackDev (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:237:16)
          at invokeGuardedCallback (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:292:31)
          at commitRootImpl (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:22541:9)
          at unstable_runWithPriority (/opt/frontend/my-volto-project/node_modules/scheduler/cjs/scheduler.development.js:653:12) Error: Unable to find node on an unmounted component.
          at findHostInstanceWithWarning (/opt/frontend/my-volto-project/src/addons/volto-slate/node_modules/react-dom/cjs/react-dom.development.js:25377:19)
          at Object.findDOMNode (/opt/frontend/my-volto-project/src/addons/volto-slate/node_modules/react-dom/cjs/react-dom.development.js:26067:12)
          at RefFindNode.componentDidMount (/opt/frontend/my-volto-project/src/addons/volto-slate/node_modules/@fluentui/react-component-ref/dist/commonjs/RefFindNode.tsx:40:32)
          at commitLifeCycles (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:19814:22)
          at commitLayoutEffects (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:22803:7)
          at HTMLUnknownElement.callCallback (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:188:14)
          at invokeEventListeners (/opt/frontend/my-volto-project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
          at HTMLUnknownElementImpl._dispatch (/opt/frontend/my-volto-project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
          at HTMLUnknownElementImpl.dispatchEvent (/opt/frontend/my-volto-project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
          at HTMLUnknownElementImpl.dispatchEvent (/opt/frontend/my-volto-project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
          at HTMLUnknownElement.dispatchEvent (/opt/frontend/my-volto-project/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
          at Object.invokeGuardedCallbackDev (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:237:16)
          at invokeGuardedCallback (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:292:31)
          at commitRootImpl (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:22541:9)
          at unstable_runWithPriority (/opt/frontend/my-volto-project/node_modules/scheduler/cjs/scheduler.development.js:653:12)
          at runWithPriority$1 (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:11039:10)
          at commitRoot (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:22381:3)
          at finishSyncRender (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:21807:3)
          at performSyncWorkOnRoot (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:21793:7)
          at scheduleUpdateOnFiber (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:21188:7)
          at updateContainer (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:24373:3)
          at /opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:24758:7
          at unbatchedUpdates (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:21903:12)
          at legacyRenderSubtreeIntoContainer (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:24757:5)
          at Object.render (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:24840:10)
          at /opt/frontend/my-volto-project/node_modules/@testing-library/react/dist/pure.js:99:25
          at batchedUpdates$1 (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom.development.js:21856:12)
          at act (/opt/frontend/my-volto-project/node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
          at render (/opt/frontend/my-volto-project/node_modules/@testing-library/react/dist/pure.js:95:26)
          at Object.<anonymous> (/opt/frontend/my-volto-project/src/addons/volto-slate/src/editor/ui/ToolbarButton.test.js:18:28)
          at Object.asyncJestTest (/opt/frontend/my-volto-project/node_modules/@jest/core/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
          at /opt/frontend/my-volto-project/node_modules/@jest/core/node_modules/jest-jasmine2/build/queueRunner.js:45:12
          at new Promise (<anonymous>)
          at mapper (/opt/frontend/my-volto-project/node_modules/@jest/core/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
          at /opt/frontend/my-volto-project/node_modules/@jest/core/node_modules/jest-jasmine2/build/queueRunner.js:75:41
          at processTicksAndRejections (internal/process/task_queues.js:97:5)

      at VirtualConsole.<anonymous> (node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)

    console.error
      The above error occurred in the <RefFindNode> component:
          in RefFindNode (created by Ref)
          in Ref (created by Button)
          in Button (at ToolbarButton.jsx:10)
          in div (at ToolbarButton.jsx:9)
          in ForwardRef (at ToolbarButton.test.js:20)
          in IntlProvider (created by ConnectFunction)
          in ConnectFunction (created by Provider)
          in Provider (created by Provider)
          in Provider (at ToolbarButton.test.js:19)
      
      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:19527:21)
      at logError (node_modules/react-dom/cjs/react-dom.development.js:19564:5)
      at update.callback (node_modules/react-dom/cjs/react-dom.development.js:20708:5)
      at callCallback (node_modules/react-dom/cjs/react-dom.development.js:12490:12)
      at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12511:9)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:19883:11)
      at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:22803:7)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14)

  ● ToolbarButton › renders a toolbar button

    Unable to find node on an unmounted component.

      16 |       },
      17 |     });
    > 18 |     const { asFragment } = render(
         |                            ^
      19 |       <Provider store={store}>
      20 |         <ToolbarButton />
      21 |       </Provider>,

      at findHostInstanceWithWarning (src/addons/volto-slate/node_modules/react-dom/cjs/react-dom.development.js:25377:19)
      at Object.findDOMNode (src/addons/volto-slate/node_modules/react-dom/cjs/react-dom.development.js:26067:12)
      at RefFindNode.componentDidMount (src/addons/volto-slate/node_modules/@fluentui/react-component-ref/dist/commonjs/RefFindNode.tsx:40:32)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:19814:22)
      at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:22803:7)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:237:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:292:31)
      at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:22541:9)
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:653:12)
      at runWithPriority$1 (node_modules/react-dom/cjs/react-dom.development.js:11039:10)
      at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:22381:3)
      at finishSyncRender (node_modules/react-dom/cjs/react-dom.development.js:21807:3)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:21793:7)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21188:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:24373:3)
      at node_modules/react-dom/cjs/react-dom.development.js:24758:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:21903:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:24757:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:24840:10)
      at node_modules/@testing-library/react/dist/pure.js:99:25
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21856:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
      at render (node_modules/@testing-library/react/dist/pure.js:95:26)
      at Object.<anonymous> (src/addons/volto-slate/src/editor/ui/ToolbarButton.test.js:18:28)

Version

2.0.1

Testcase

I think the steps to reproduce are easier to follow than a possible testcase.

The text was updated successfully, but these errors were encountered:

welcome · 2020-12-09T17:46:12Z

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

layershifter · 2020-12-09T18:12:37Z

@silviubogan can you please provide an isolated example?

layershifter · 2020-12-13T12:14:03Z

Closing this for housekeeping until we will have an isolated repro 😿

P.S. For sure we are open to accept fixes if you will be able to debug the issue.
P.P.S. Isolated repro is important as for example I even don't have Docker on my machine.

layershifter · 2020-12-13T12:16:19Z

If react-test-renderer is used directly, you can try to use mocks:
facebook/react#7371 (comment)

However, it's really strange that issue came from React's upgrade.

danydhondt · 2021-03-24T15:26:23Z

A simple Button gives the same error in React 17 and up. Downgrading to react 16.x.x removes the error. There's a lot of npm packages which suffer the same issue!

brianespinosa · 2021-03-24T17:18:51Z

@danydhondt feel free to make a repro case then

silviubogan mentioned this issue Dec 11, 2020

Module name mappings not good in Yeoman Volto generator for volto-slate eea/volto-slate#45

Open

layershifter closed this as completed Dec 13, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error related to RefFindNode and React 17 #4124

Error related to RefFindNode and React 17 #4124

silviubogan commented Dec 9, 2020 •

edited

Loading

welcome bot commented Dec 9, 2020

layershifter commented Dec 9, 2020

layershifter commented Dec 13, 2020

layershifter commented Dec 13, 2020

danydhondt commented Mar 24, 2021

brianespinosa commented Mar 24, 2021

Error related to RefFindNode and React 17 #4124

Error related to RefFindNode and React 17 #4124

Comments

silviubogan commented Dec 9, 2020 • edited Loading

Bug Report

Steps

Expected Result

Actual Result

Version

Testcase

welcome bot commented Dec 9, 2020

layershifter commented Dec 9, 2020

layershifter commented Dec 13, 2020

layershifter commented Dec 13, 2020

danydhondt commented Mar 24, 2021

brianespinosa commented Mar 24, 2021

silviubogan commented Dec 9, 2020 •

edited

Loading