Bug: (SSR) Warning: Extra attributes from the server: style

[daniel0ar]

Current Behavior

Adding a theme option into the init method import { init } from '@web3-onboard/react' results in a big red warning in the browser saying:

Warning: Extra attributes from the server: style

Expected Behavior

No warning or error should be shown just by adding styles, or there should be a way to disable SSR on init.

Steps To Reproduce

1. import { init } from '@web3-onboard/react'
2. export default init({ theme: "system" })
3. Start a NextJS application with server side rendering.

What package is effected by this issue?

@web3-onboard/react

Is this a build or a runtime issue?

Runtime

Package Version

2.8.17

Node Version

20.11.1

What browsers are you seeing the problem on?

Firefox, Chrome

Relevant log output

html
RootLayout (Server)
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:24
NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9
NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:62
DevRootNotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:24
ReactDevOverlay@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9
HotReload@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:37
Router@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:134
ErrorBoundaryHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:67
AppRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:577:47
ServerRoot@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27
Root@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:24

Anything else?

If there is a way to go around this issue please help me, thank you :)

Sanity Check

• [X] If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.