Also its fake

It don't let you to insert YouTube video - please update docs

There should be

 <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/jfKfPfyJRdk?si=aUjXBlmyUhSPy27u"
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen></iframe>

from next.js.

Also its fake

It don't let you to insert YouTube video - please update docs

There should be

 <iframe

        width="560"

        height="315"

        src="https://www.youtube.com/embed/jfKfPfyJRdk?si=aUjXBlmyUhSPy27u"

        title="YouTube video player"

        frameBorder="0"

        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

        allowFullScreen></iframe>

This comment is unrelated to the provided issue.

from next.js.

And with regards to the import. You might want to take a look at the following docs. Since this isn't a Next.js issue in this case.

https://webpack.js.org/api/module-methods/#import-

from next.js.

I guess this code in VideoOverlay.tsx cause issue (you may delete other stuff to make sure in that)

 <div
        className={`preview bg-[url('${previewSrc}')] bg-no-repeat bg-cover
				absolute inset-0 z-[1]`}
        onClick={() => {
          playPauseVideo()
        }}></div>

I updated codesandbox

Also I think its because of this code - any workaround?

from next.js.

I guess this code in VideoOverlay.tsx cause issue (you may delete other stuff to make sure in that)

 <div
        className={`preview bg-[url('${previewSrc}')] bg-no-repeat bg-cover
				absolute inset-0 z-[1]`}
        onClick={() => {
          playPauseVideo()
        }}></div>

I updated codesandbox

Also I think its because of this code - any workaround?

The provided snippet isn't intended to work, refer to the TailwindCSS docs using the link below:
https://tailwindcss.com/docs/content-configuration#dynamic-class-names

from next.js.

I guess this code in VideoOverlay.tsx cause issue (you may delete other stuff to make sure in that)

 <div
        className={`preview bg-[url('${previewSrc}')] bg-no-repeat bg-cover
				absolute inset-0 z-[1]`}
        onClick={() => {
          playPauseVideo()
        }}></div>

I updated codesandbox
Also I think its because of this code - any workaround?

The provided snippet isn't intended to work, refer to the TailwindCSS docs using the link below: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

I see this

And how do you want me to write it?

from next.js.

I guess this code in VideoOverlay.tsx cause issue (you may delete other stuff to make sure in that)

    className={`preview bg-[url('${previewSrc}')] bg-no-repeat bg-cover

  		absolute inset-0 z-[1]`}

    onClick={() => {

      playPauseVideo()

    }}></div>

I updated codesandbox

Also I think its because of this code - any workaround?

The provided snippet isn't intended to work, refer to the TailwindCSS docs using the link below: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

I see this

And how do you want me to write it?

You could use the styles prop for that instead of tailwind. In all cases, this is unrelated to Next.js specifically. So if you could close this issue, that would be great 👍

from next.js.

Solved

https://codesandbox.io/p/devbox/mvp-video-cannot-resolve-previewsrc-8kfn23?file=%2Fapp%2Fcomponents%2Fvideo%2FVideoOverlay.tsx

from next.js.