ERR_REQUIRE_ESM

[sayom-chat]

FAQ

1. How can I clean all cached options?

   • Check cacheUniq param in versions < 0.4.x and cacheUniqs in 0.4.x

Are you submitting a bug report or a feature request or a question?

What is the current behavior?

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\schatterje353\Documents\Projects\myApp\node_modules.pnpm\@vtaits+use-lazy-ref@0.1.1_react@18.2.0\node_modules\@vtaits\use-lazy-ref\dist\index.js from C:\Users\schatterje353\Documents\Projects\myApp\node_modules.pnpm\react-select-async-paginate@0.7.3_react-select@5.8.0_react@18.2.0\node_modules\react-select-async-paginate\dist\index.js not supported. C:\Users\schatterje353\Documents\Projects\myApp\node_modules.pnpm\@vtaits+use-lazy-ref@0.1.1_react@18.2.0\node_modules\@vtaits\use-lazy-ref\dist\index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules. Instead rename C:\Users\schatterje353\Documents\Projects\myApp\node_modules.pnpm\@vtaits+use-lazy-ref@0.1.1_react@18.2.0\node_modules\@vtaits\use-lazy-ref\dist\index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\Users\schatterje353\Documents\Projects\myApp\node_modules.pnpm\@vtaits+use-lazy-ref@0.1.1_react@18.2.0\node_modules\@vtaits\use-lazy-ref\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

What is the expected behavior?

Sandbox Link

What's your environment?

Other information

[rajat-masih]

Share some more info how you're using it in your code @sayom-chat

[sayom-chat]

import {withAsyncPaginate} from 'react-select-async-paginate'

import Creatable from 'react-select/creatable'

const CreatableAsyncPaginate = withAsyncPaginate(Creatable)

export const MyComp = () => {
 return (
<CreatableAsyncPaginate
          isDisabled={false}
          className={className}
          closeMenuOnSelect={true}
          components={{DropdownIndicator}}
          isClearable={true}
          value={value}
          onChange={handleChange}
          loadOptions={paginatedLoadOptions}
          placeholder={'Select'}
          menuPlacement="auto"
          noOptionsMessage={noOptionsMessage}
          additional={{
            page: 1,
          }}
          debounceTimeout={1000}
          defaultOptions
        />
)
}

"next": "^14.1.4",

this is my code snippet @rajat-masih

[rajat-masih]

Try the dynamic import @sayom-chat

import dynamic from 'next/dynamic';
import Creatable from 'react-select/creatable';

// Dynamically import withAsyncPaginate and use it to wrap CustomMenuList
const CreatableAsyncPaginate = dynamic(
  () =>
    import('react-select-async-paginate').then(pkg => {
      const WithAsyncPaginate = pkg.withAsyncPaginate(Creatable);
      return function ({ selectProps, ...props }) {
        return <WithAsyncPaginate selectProps={selectProps} {...props} />;
      };
    }),
  { ssr: false },
); // Disabling SSR if necessary

[sayom-chat]

It worked for me with dynamic import, @rajat-masih thanks for ur help. However can u explain me what is the breaking changes? till yesterday it worked fine with static named import

[rajat-masih]

I also don't know what happened It was also working fine for me from last 2 months but yesterday it stopped. After spending 4 to 5 hours I got this fix.

[Sanjanaekanayake]

@rajat-masih We're also facing the same issue in Next.js version 11. Please find the code snippet below.

import { AsyncPaginate } from "react-select-async-paginate";

return (

<div>
<AsyncPaginate
                                value={teamMembersValues}
                                loadOptions={handleTeamMemberSearch}
                                isMulti
                                isClearable={false}
                                onChange={handleTeamMembers}
                                debounceTimeout={1000}
                                styles={teamMemberSelectStyles}
                                classNamePrefix="meet-the-team-select"
                                className="meet-the-team-basic-multi-select"
                                noOptionsMessage={({ inputValue }) =>
                                  inputValue?.length > 0
                                    ? "No members found"
                                    : ""
                                }
                                components={{
                                  DropdownIndicator: () => null,
                                }}
                                placeholder=""
                              />
</div>)

This worked fine a few days back, and suddenly we encountered the same issue while building the code. Since we are not using the withAsyncPaginate hook here, how can this be fixed?"

[rajat-masih]

react-select-async-paginate

@Sanjanaekanayake Try this

const AsyncPaginate = dynamic(() => import('react-select-async-paginate').then(mod => mod.AsyncPaginate), {
  ssr: false, // Disable server-side rendering for this component
});

[CaduZulian]

I'm facing the same problem, my unit tests broke and this error appeared in my console.

From what I was able to analyze, this error is happening because the @vtaits/use-lazy-ref library has been updated, and its build version does not have .cjs files, as this new version uses tsup with the --legacy-output flag to the build.

To solve this problem in a palliative way, I suggest downloading the @vtaits/use-lazy-ref package directly into the project, locking the version at 0.1.0, at least until @vtaits can analyze and resolve the problem.

I have already created a PR (https://github.com/vtaits/use-lazy-ref/pull/1) with a possible solution to the problem, I hope it will be reviewed soon.

[CaduZulian]

I have already created a PR (vtaits/use-lazy-ref#1) with a possible solution to the problem, I hope it will be reviewed soon.

The PR has been reviewed and integrated, this issue should be resolved.

If updating still doesn't resolve the issue, consider the solution given above