The Upload Widget doesn't render in React Strict Mode

[atapas]

Describe the bug

If My React component is enclosed with React.StrictMode, the Upload button doesn't appear always.

Install Create React App. Make sure the index.js file has the React.StrictMode Now write a component to import the widget.

Expected behavior

The widget should appear.

Code / screenshots

In index.js file

<React.StrictMode>
  <UploadFile />      
</React.StrictMode>

in UploadFile.js(JSX part)

<p>
              <label htmlFor="file">Your file:</label>{" "}
              <Widget 
                publicKey={process.env.REACT_APP_UPLOADCARE_API_SECRET_KEY} 
                id="file" 
                onChange = {(info) => uploadFileChange(info)}
                onFileSelect = {(file) => uplodFileSelect(file)} />
            </p>

The screen without the upload button:

The Warning in the console

Everything works fine if I remove the Strict Mode. The app is on React 18

Environment

• Library version: ^2.0.0
• Language/framework version: React 18.0.0
• OS version: Windows 10

[nd0ut]

Hey @atapas!

I bumped react to v18 and fixed working under React.StrictMode, see https://github.com/uploadcare/react-widget/pull/321. It will be released asap.

As for your screenshot - this warning wasn't caused by react-widget, it's something on your side. Try to grep your codebase with UNSAFE_componentWillMount and SideEffect keywords to detect the warning source.