spinner.gif not working in Next13 about amazon-cognito-passwordless-auth HOT 4 CLOSED

Thanks for the report. Can you share any more specifics around the error? And is it possible to provide steps/code to reproduce?

from amazon-cognito-passwordless-auth.

I was able to reproduce this by creating a sample next app and import the Passwordless React hooks and components (in a next component marked as 'use client', otherwise you run into another issue with localStorage being undefined).

Turns out when you do this in your JS code: import spinner from "../assets/spinner.gif", as we do, NextJS wants you to access the source location using the src property, e.g. <img src={spinner.src} />, however we do <img src={spinner} /> (without .src). Must be a bundling issue, Vite is fine with doing it as we do, and I believe it is the common way in React.

Note Next would support what we do if you use their Image component, instead of plain img: https://nextjs.org/docs/pages/building-your-application/optimizing/images

Not sure what to do with this. Any idea @EricBorland ?

from amazon-cognito-passwordless-auth.

Would the following work in Next?

import spinner from "../assets/spinner.gif"
const spinnerWrapper = {
  src: spinner
};

[...]
<img src={spinnerWrapper.src} />

If not, I guess another option is to reference the image by its url instead of importing directly in the code...

from amazon-cognito-passwordless-auth.

Fixed by #63 which is included in https://github.com/aws-samples/amazon-cognito-passwordless-auth/releases/tag/v0.6.6 onwards

from amazon-cognito-passwordless-auth.