Syntax errors with NextJS

[oyeanuj]

Hi @tbleckert, I'm unable to get it to work with NextJS, seeing the errors below. Any thoughts on how to fix them?

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1067:16)
    at Module._compile (internal/modules/cjs/loader.js:1115:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.react-select-search
/Users/anuj/Code/shuffle-web-next/node_modules/react-select-search/dist/esm/index.js:1
export { default as useSelect } from './useSelect';

[ishouvik]

Yup, I can confirm the same issue for my SSR implementation as well.

[tbleckert]

If you're using it with SSR you need to use the commonjs build,

import SelectSearch from 'react-select-search/dist/cjs';

Let me know if that works and if you encounter any other problems, I haven't had a chance to test to render it server side yet, but shouldn't be any problem as I don't use any browser API's on first render.

[ishouvik]

If you're using it with SSR you need to use the commonjs build,

import SelectSearch from 'react-select-search/dist/cjs';

Let me know if that works and if you encounter any other problems, I haven't had a chance to test to render it server side yet, but shouldn't be any problem as I don't use any browser API's on first render.

Thank you very much. It works.

The CSS has to be loaded separately though.

It will be fun to use the headless part of this package with ChakraUI.

[tbleckert]

Yeah, you can import it but you would have to map the classes by importing it like this:

import classes from 'react-select-search/style.css';

And then pass a function as the className as described here.

ChakraUI integration sounds interesting, let me know if you make something!

[JoueBien]

Please update the read me to include something like:

If your using SSR where the CSS has to be included elsewhere you'll need to import using:

import SelectSearch from 'react-select-search/dist/cjs'; 
import classes from 'react-select-search/style.css';

And then pass a function as the className as described here.

[tbleckert]

Documentation updated, closing this.