search

styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.29k stars 106 forks source link

I'm getting an error using in SSR with NextJS: Attempted import error: 'useState' is not exported from 'react' (imported as 'React'). #409

Closed ChristianHardy closed 1 year ago

ChristianHardy commented 1 year ago

🐛 Bug Report

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior: Just running npm start dev on my terminal and later navigate to http://localhost:3000/ on Chrome web browser. The NextJS installation it's totally new.

Expected behavior

Must display the welcome page

Link to repl or repo (highly encouraged)

I haven't a repo but here's the code used on a totally new NextJS project:

The package JSON

{
    "name": "alpha-web",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "@types/node": "20.5.6",
        "@types/react": "18.2.21",
        "@types/react-dom": "18.2.7",
        "@xstyled/styled-components": "^3.8.0",
        "eslint": "8.47.0",
        "eslint-config-next": "13.4.19",
        "next": "13.4.19",
        "prettier": "^3.0.2",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "styled-components": "^6.0.7",
        "typescript": "5.2.2"
    }
}

Layout.tsx

import { XThemeProvider } from '@providers/ThemeProvider';
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
    title: 'Create Next App',
    description: 'Generated by create next app',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body className={inter.className}>
                <XThemeProvider>
                    { children }
                </XThemeProvider>
            </body>
        </html>
    );
}

ThemeProvider component

import React from 'react';
import { Preflight, ThemeProvider, defaultTheme } from '@xstyled/styled-components'

type ThemeProviderProps = {
    children?: React.ReactNode;
};

const theme = {
    ...defaultTheme,
};

function XThemeProvider(props: ThemeProviderProps) {
    const { children } = props;

    return (
        <>
            <ThemeProvider theme={theme}>
                <Preflight />
                { children }
            </ThemeProvider>
        </>
    );
}

export { XThemeProvider };

An screenshot with the error:

image

Run npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 14.0
 - CPU: (10) arm64 Apple M1 Pro
 - Memory: 90.27 MB / 16.00 GB
 - Shell: 3.6.0 - /opt/homebrew/bin/fish
## Binaries:
 - Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
 - npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
## npmPackages:
 - @xstyled/styled-components: ^3.8.0 => 3.8.0 
 - styled-components: ^6.0.7 => 6.0.7