Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The Upload Widget doesn't render in React Strict Mode #320

Open
atapas opened this issue Apr 23, 2022 · 1 comment
Open

The Upload Widget doesn't render in React Strict Mode #320

atapas opened this issue Apr 23, 2022 · 1 comment
Labels

Comments

@atapas
Copy link

atapas commented Apr 23, 2022

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:

image

The Warning in the console

image

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

image

Environment

  • Library version: ^2.0.0
  • Language/framework version: React 18.0.0
  • OS version: Windows 10
@atapas atapas added the bug label Apr 23, 2022
@atapas atapas changed the title The Upload Widget doesn't render in React Strictmode The Upload Widget doesn't render in React Strict Mode Apr 25, 2022
@nd0ut
Copy link
Member

nd0ut commented Apr 29, 2022

Hey @atapas!

I bumped react to v18 and fixed working under React.StrictMode, see #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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

No branches or pull requests

2 participants