linaria icon indicating copy to clipboard operation
linaria copied to clipboard

Error using `styled` method from `linaria/react` along with NextJS and Material UI

Open psdaniel opened this issue 1 year ago • 0 comments

Environment

{
    "next": "13",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@linaria/babel-preset": "^5.0.4",
    "@linaria/core": "^6.2.0",
    "@linaria/react": "^6.2.1",
    "@mui/material": "^5.15.6",
    "@wyw-in-js/babel-preset": "^0.5.3",
    "@wyw-in-js/transform": "^0.5.3",
    "next-with-linaria": "^0.7.0",
}
  • Linaria version: 6.2.0
  • Bundler (+ version):
  • Node.js version: 20.11.0
  • OS: Linux Ubuntu

Description

I was trying to set up Linaria in my project and it worked pretty well until I tried to use the styled method explained below. It started to throw a compile error because some exception thrown on this file: node_modules/@wyw-in-js/transform/lib/module.js. If I comment the lines 223 and 224 it works fine, so I was wondering if it's crashing the application because of the attempt to format some warning?

import { styled } from '@linaria/react'

const StyledTypography = styled(Typography)`
  color: red;
`
  • Error: image

Reproducible Demo

You can try to use Material with the Linaria setup in a Next 13 application and try to pass any Material component to the styled method of linaria/react.

psdaniel avatar May 24 '24 15:05 psdaniel