ERROR - Module not found - Can't resolve './${previewSrc}'

[nicitaacom]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/mvp-cannot-resolve-previewsrc-8kfn23

To Reproduce

1. Open codeasndbox
2. See this error
   

Current vs. Expected behavior

I expect no error
I got error

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Image optimization (next/image, next/legacy/image)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I found no related issues to this

This is not related to this issues - admins please don't close after 10 seconds on looking on this issue:
https://stackoverflow.com/questions/65125891/cant-resolve-images-img-2-jpg-in-e-react-react-demo-src
#17639

In my case I have issue related to some previewSrc in globals.css

I in fact I don't changed default globals.css

[nicitaacom]

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>

[JesseKoldewijn]

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.

[JesseKoldewijn]

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-

[nicitaacom]

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?

[JesseKoldewijn]

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

[nicitaacom]

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?

[JesseKoldewijn]

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 👍

[nicitaacom]

Solved

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

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.