styled-components / styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
https://styled-components.com
MIT License
40.11k stars 2.48k forks source link

Simple Styled Component giving error about extending not existing component in Next 14 #4272

Open rnnyrk opened 2 months ago

rnnyrk commented 2 months ago

Environment

## System:
 - OS: macOS 14.3.1
 - CPU: (11) arm64 Apple M3 Pro
 - Memory: 73.89 MB / 18.00 GB
 - Shell: 5.9 - /bin/zsh
## Binaries:
 - Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
 - npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
 - pnpm: 8.15.4 - /opt/homebrew/bin/pnpm
 - bun: 1.0.29 - /opt/homebrew/bin/bun
 - Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
## npmPackages:
 - styled-components: 6.1.8 => 6.1.8

Reproduction

https://github.com/rnnyrk/tasks-sc

https://github.com/rnnyrk/tasks-sc/blob/main/src/components/modules/tasks/TasksOverview.tsx

Issue also happens with every component commented out and the only styled component being in the styled.div in the last file (TasksOverview)

Steps to reproduce

git clone git@github.com:rnnyrk/tasks-sc.git
cd tasks-sc && pnpm i
pnpm dev

Expected Behavior

I'm trying to get Styled Components working with React Aria + NextJS 14. Rendering the Styled Components as use client, so that shouldn't cause trouble. I expect the components to render without an error, since I'm not extending any component as the error suggests..

Actual Behavior

Component is not a styled component and cannot be referred to via component selector.

But I'm not extending any component. Codebase is rather simple, just a few styled components. Also downscaled to one rendering 1 component which is just a styled.div I get this error..

Screenshot 2024-03-01 at 11 55 16