Importing hooks connectors in NextJS throws an error

[felipepastor]

Hi,

Quick question: Did you have issues using the hook connectors in a NextJS application? I'm getting and error once I try to use it there. ES module is not compatible, and it should be since nextjs supports on version 12.

error - node_modules/next-global-css/lib/patch-global-require.js (10:0) @ Object.apply
Error: require() of ES Module /.../node_modules/instantsearch.js/es/connectors/geo-search/connectGeoSearch.js from /.../.next/server/pages/index.js not supported.
Instead change the require of connectGeoSearch.js in /.../.next/server/pages/index.js to a dynamic import() which is available in all CommonJS modules.
null
error - node_modules/next-global-css/lib/patch-global-require.js (10:0) @ Object.apply
Error: require() of ES Module /.../node_modules/instantsearch.js/es/connectors/geo-search/connectGeoSearch.js from /usr/local/var/www/shop-finder/.next/server/pages/index.js not supported.
Instead change the require of connectGeoSearch.js in /.../.next/server/pages/index.js to a dynamic import() which is available in all CommonJS modules.
null

import connectGeoSearch from 'instantsearch.js/es/connectors/geo-search/connectGeoSearch';
import { useConnector } from 'react-instantsearch-hooks';

export function useGeoSearch(props) {
  return useConnector(connectGeoSearch, props);
}

export function GeoSearch(props) {
  const props2 = useGeoSearch(props);

  console.log('here', props2);

  return <>123</>;
}

Sorry if it was already discussed, please, let me know if you need more information from my side.

Thanks.

[Haroenv]

Not sure what causes that error for you. I tried reproducing in codesandbox, as well as running this example locally and it doesn't error https://codesandbox.io/s/festive-rosalind-t3i2jz?file=/pages/index.tsx

[felipepastor]

We somehow are extnding the webpack in next.config and this is causing the errors for importing.
But thanks for the example.

[Haroenv]

For future reference, which configuration causes that issues?