CODEWITHSUNDEEP
reactjstypescriptnext.jsreact-select
Loudrous
Loudrous

Reputation: 1305

react select error on upgrade: TypeError: dispatcher.useInsertionEffect is not a function

I have just updated the react-select library and I have found out that It doesn't work anymore. On the official site I found this Upgrade guide which doesn't help me and which says nothing.

I've also checked the samples on their site, but it gives me the same error.

for example I want to do a very basic creatable select:

import AsyncCreatableSelect from 'react-select/async-creatable';

const promiseOptions = (inputValue: string) =>
  new Promise<any[]>((resolve) => {
    setTimeout(() => {
      console.log('searching...');
    }, 1000);
  });

const Select: React.FC = () => {
  return (
    <AsyncCreatableSelect
      cacheOptions
      defaultOptions
      loadOptions={promiseOptions}
    />
  );
};

Same for all the others selects I have in my project. Do you have any idea on how to fix it?

The error I receive is the following:

enter image description here

I use nextjs 12.1.2 react 18.0.0 and typescript 4.6.3 and react-select 5.2.2

Upvotes: 12

Views: 12007

Answers (4)

Wamz
Wamz

Reputation: 151

To resolve the issue, I resolved it by installing react-dom. Make sure you have both dependencies, "react" and "react-dom," in your "devDependencies" (not just in "peerDependencies"), and ensure they are installed correctly.

npm i --save-dev react@18 react-dom@18

Sources: https://github.com/storybookjs/storybook/issues/18327

Upvotes: 0

Anshuman Bisoyi
Anshuman Bisoyi

Reputation: 236

I solved it by updating my react-dom:npm i --save-dev react@18 react-dom@18

Upvotes: 1

Da Cookie Manster
Da Cookie Manster

Reputation: 111

In my case the problem was the Hot Module Replacement (HMR) setting. I used Material UI on Typescript with webpack. I added HMR blindly to the webpack config and this error appeared by running webpack-dev-server. react and react-dom were at the same 18.2 version.

I solved it by removing the HMR completely from webpack.config.js.

Hope it helps.

Upvotes: 1

Loudrous
Loudrous

Reputation: 1305

The problem seems to be the fact that I use react 18.0.0 with react-dom 17.0.1

In order to solve the problem above, just update the react-dom to 18.0.0

Upvotes: 32

Related Questions