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

Question

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

Answer 1

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

Answer 2

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.