Invalid hook call

[rikhav-parsegon]

Using the Widget throws an invalid hook call error.

There are two errors that appear in the console:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js?aef8:1476)
    at useLayoutEffect (react.development.js?aef8:1523)
    at Config (index-be67ac8a.js?6244:187)
    at renderWithHooks (react-dom.development.js?61bb:14803)
    at mountIndeterminateComponent (react-dom.development.js?61bb:17482)
    at beginWork (react-dom.development.js?61bb:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
    at invokeGuardedCallback (react-dom.development.js?61bb:292)
    at beginWork$1 (react-dom.development.js?61bb:23203)

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js?aef8:1476)
    at useState (react.development.js?aef8:1507)
    at ClientSuspense (index.js?506e:5)
    at renderWithHooks (react-dom.development.js?61bb:14803)
    at mountIndeterminateComponent (react-dom.development.js?61bb:17482)
    at beginWork (react-dom.development.js?61bb:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
    at invokeGuardedCallback (react-dom.development.js?61bb:292)
    at beginWork$1 (react-dom.development.js?61bb:23203)

This occurred when integrating uploadcare into our existing React app, following step 2 here

To reproduce, run

npm install @uploadcare/react-widget

and include

import { Widget } from "@uploadcare/react-widget";

const SomeComponentInYourApp = () => {
    return <p>
                    <label htmlFor="file">Your file:</label>{" "}
                    {/* @ts-ignore */}
                    <Widget publicKey="demopublickey" id="file" />
                </p>;
}

Environment

• React build-info.json:

{
  "branch": "pull/18344",
  "buildNumber": "106499",
  "checksum": "7fe5a2e",
  "commit": "da834083c",
  "environment": "ci",
  "reactVersion": "16.12.0-da834083c"
}

• Webpack version 4.44.2
• Webpack module:

        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    use: "ts-loader",
                    exclude: /node_modules/,
                },
                {
                    test: /\.jsx?$/,
                    use: "babel-loader",
                    exclude: /node_modules/,
                },
                {
                    test: /^((?!ReactToastify).)*\.css$/,
                    use: [
                        "style-loader",
                        "@teamsupercell/typings-for-css-modules-loader",
                        {
                            loader: "css-loader",
                            options: {
                                modules: true,
                                localIdentName:
                                    "[name]__[local]___[hash:base64:5]",
                            },
                        },
                    ],
                },
                {
                    test: /ReactToastify\.css$/,
                    use: [
                        { loader: "style-loader" },
                        {
                            loader: "css-loader",
                            options: {
                                modules: true,
                                localIdentName: "[local]",
                            },
                        },
                    ],
                },
            ],
        },

[nd0ut]

Hey @rikhav-parsegon! Thanks for report.

Unfortunately, I can't reproduce the problem. It seems that you have > 1 react instances in your project.

Could you provide npm ls react or yarn list react output?

[rikhav-parsegon]

npm ls react is printing

@parsegon/[email protected] /Users/rikhav/Desktop/frontend/app
├─┬ @uploadcare/[email protected]
│ ├─┬ @uploadcare/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
└── [email protected]

On a hunch, I disabled code splitting by adding the plugin new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) to our config, and that seems to have fixed the issue.