can not use with react

[romanown]

when i use import { tns } from 'tiny-slider';
error tns is undefined in consol
when i use import { tns } from 'tiny-slider/src/tiny-slider'; or require ('tiny-slider/src/tiny-slider');
error
Unexpected token import

can You specify in documentation as right with react.js.
tiny-slider is the best slider but i can not use it with react. with plain html and js it the best. help me please use it without any wrapper.

Tiny-slider version:
2.9.3

[jorianvo]

This is the same issue as #262. I explained in my comment how I was able to get the import to work. Let me know if that solves your issue.

edit: My apologies, I read the issue too quickly. It might be related, but not the same.

[romanown]

thank You. but i do not use the Jest.

[jorianvo]

My apologies, I read the issue too quickly. But the cause might still be the same. Have a look at this issue or this

[romanown]

thank You. i will to try it later. now the little helped me require('tiny-slider/src/tiny-slider').tns({. the slider working but bad. i changed slider to other suppler. i have the time to experiment. but in mobile app with php this slider the best. suspend this issue.

[nghiepdev]

Because Node.js doesn't support for ECMAScript modules.
So, you should make sure the tiny-slider imported only the client-side.

For React: You can only import require('tiny-slider/src/tiny-slider') in useEffect or same.

With me using useCallback for the best solution.(use import() instead of required())

const sliderElementRef = useCallback<(node: Element | null) => void>(
    async node => {
      if (node instanceof HTMLElement) {
        const {tns} = await import('tiny-slider/src/tiny-slider');

        const slider = tns({
          container: node,
          // other options
        });
      }
    },
    [],
  );

return <div>
   <div ref={sliderElementRef}>
   <!-- Slider items -->
   </div>
</div>