Component not rendering and `findDOMNode is deprecated in StrictMode`

[laura-asimov]

Describe the bug

Warning: findDOMNode is deprecated in StrictMode. still showing, and nothing is rendered using the example instantiation. It is possible these two behaviors are unrelated.

Expected behavior

Warning should not be shown and the sequence viewer should be displayed

This is a codesandbox to reproduce the issue https://codesandbox.io/s/zeqviz-2034785vi2ht-54uufn?file=/src/App.js

[jjti]

I was able to replicate after adding below to next.config.js:

reactStrictMode: true

In the refactor I moved size detection from one component to another, and dropped the size detection on the second: https://github.com/Lattice-Automation/seqviz/commit/35c82a8ae825094deebaf4bbfcb5318e80136b4d#diff-f7c1182011f8419b44f6460df1714cb438bf53d3466986b8c9a5d3ad77460059

I pushed a patch in 3.7.2: https://github.com/Lattice-Automation/seqviz/releases/tag/3.7.2

Forked example here of it working: https://codesandbox.io/s/zeqviz-2034785vi2ht-forked-4636hz?file=/src/styles.css

Re: codesandbox example, the viewer fills the size of the div that surrounds it, so will also need something like:

html,
body,
#root {
  height: 100%;
  width: 100%;
}

[jjti]

I haven't used but am a fan of code sandbox for examples... I've been trying to figure out how to create little mini demos of SeqViz and might go that route. /demo is cool but there's more there than more folks will want if they just want a copy/paste example of instantiating the viewer

[laura-asimov]

@jjtimmons, thank you for the quick reply and providing a solution! This fixed my issue.

I haven't used but am a fan of code sandbox for examples...

I'm also a fan! It provides the simplest setup I can think of for demos, and it works!