linaria icon indicating copy to clipboard operation
linaria copied to clipboard

Assets path is treated as undefined in nextjs.

Open hoiheart opened this issue 2 years ago • 2 comments

Environment

  • Linaria version: latest
  • Bundler (+ version): nextjs13 + webpack5
  • Node.js version: latest
  • OS: any

Description

Hello, I want to use linaria for nextjs, but I encountered the following problem.

The image processed by the next-image-loader is img.src returns the string of the actual path. But if I put it in linaria css, it's recognized as undefined.

스크린샷 2023-01-13 오후 2 40 57

스크린샷 2023-01-13 오후 2 25 53

Is there a way to solve this?

Reproducible Demo

https://codesandbox.io/p/sandbox/dreamy-morning-gxes95?file=%2Fpages%2Findex.tsx&selection=%5B%7B%22endColumn%22%3A3%2C%22endLineNumber%22%3A9%2C%22startColumn%22%3A3%2C%22startLineNumber%22%3A9%7D%5D

hoiheart avatar Jan 13 '23 05:01 hoiheart

I think the issue is, that that linaria transforms the file before the file loader comes into play. Therefore the image object is undefined when the css gets evaluated.

dlehmhus avatar Mar 23 '23 14:03 dlehmhus

I had same issue and tried to avoid with next-images. But had file system path, like this url(/Users/asd/.../image.png), instead of url...

mochalinEA avatar Oct 10 '23 16:10 mochalinEA