Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
psdaniel opened this issue May 24, 2024 · 0 comments
Labels
bug report 🦗 Issue is probably a bug, but it needs to be checked bundler: webpack 📦 Issue is related to webpack bundler needs: complete repro 🖥️ Issue need to have complete repro provided platform: next.js 🛠️ Issue related to next.js

Comments

@psdaniel
Copy link

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 psdaniel added bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided needs: triage 🏷 Issue needs to be checked and prioritized labels May 24, 2024
@github-actions github-actions bot added bundler: webpack 📦 Issue is related to webpack bundler platform: next.js 🛠️ Issue related to next.js and removed needs: triage 🏷 Issue needs to be checked and prioritized labels May 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug report 🦗 Issue is probably a bug, but it needs to be checked bundler: webpack 📦 Issue is related to webpack bundler needs: complete repro 🖥️ Issue need to have complete repro provided platform: next.js 🛠️ Issue related to next.js
Projects
None yet
Development

No branches or pull requests

1 participant