I have a problem about a couple days after the vercel’s updates, and i cannot resolve this, this is on the vercel sides.
I have ‘use client’ in all contexts, all client wrappers, all client pages, all components that have a useState, useEffect…
I have tried a styledjsx module but it does not help.
With this problem my project doesn’t work anymore, thanks vercel for updates)
I have already cleaned all caches (in browser, git local) npm update, npm install, all of that, rm -rf node_modules package-lock.json… But it doesn’t work.
Little story: I just woke up, turn on my pc and the project on localhost, and problem come out of nowhere) And i see that vercel have an update, cool, my project has been broked by vercel update.
Help me.
Invalid import
'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.
The error was caused by using 'styled-jsx'. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
<!-- Code, configuration, and steps that reproduce this issue -->
I have one file inluded style-jsx global - but it doesn't the root of the problem, this problem appears with / without it.
app/layout.js
import "./globals.css";
import Header from "./components/Header";
import Footer from "./components/Footer";
export default async function Layout({ children }) {
return (
<html lang="en">
<body className={`${rubik.className} selection:bg-selection-color caret-light-green`}>
<SessionWrapper>
<ConfirmationWrapper>
<TwoFAWrapper>
<ClientWrapper>
<Suspense>
{children}
</Suspense>
</ClientWrapper>
</TwoFAWrapper>
</ConfirmationWrapper>
</SessionWrapper>
</body>
)};
DEVELOPMENT ENVIRONMENT