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

Issue

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:

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

Solution

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

Answered By - Loudrous