Warning: Prop `builder-inline-styles` did not match. Server: "null" Client: ""

What are you trying to accomplish
I want to upgrade the @builder.io/react sdk to the latest version (3.0.14)

Screenshots or video link

Code stack you are integrating Builder with
NextJs 13.5.3

after upgrading the package i see this error in all my pages:
Warning: Prop builder-inline-styles did not match. Server: "null" Client: ""

From what i see, all builder elements contain the builder-inline-styles by default, so it’s not something i can control in my end…

Any suggestions on how to handle this warning?

Hello neri,

Would you be able to share all of your dependencies?

Hi neri,

Just wanted to follow up with you. If you’re able to revisit, please feel free to post here, or reach out to support@builder.io

  "dependencies": {
    "@apollo/client": "^3.8.7",
    "@builder.io/react": "^3.1.1",
    "@builder.io/sdk": "^2.1.1",
    "@builder.io/widgets": "^1.2.24",
    "@marbletech/core": "^0.15.97",
    "@marbletech/hooks": "^0.15.97",
    "@marbletech/icons": "^0.15.97",
    "@marbletech/locale": "^0.15.97",
    "@marbletech/services": "^0.15.97",
    "@marbletech/utils": "^0.15.97",
    "@radix-ui/react-collapsible": "1.0.3",
    "@radix-ui/react-dialog": "^1.0.5",
    "@segment/analytics-next": "^1.59.0",
    "@sentry/nextjs": "^7.77.0",
    "@splitsoftware/splitio": "^10.23.1",
    "@splitsoftware/splitio-react": "^1.9.0",
    "@stripe/react-stripe": "^7.0.0-beta.0",
    "@stripe/react-stripe-js": "^2.3.1",
    "@svgr/webpack": "^8.1.0",
    "antd": "^5.11.0",
    "axios": "^1.6.0",
    "babel-plugin-inline-react-svg": "^2.0.2",
    "framer-motion": "^10.16.4",
    "framer-motion-ticker": "^1.0.19",
    "fs": "^0.0.1-security",
    "graphql": "^16.8.1",
    "lodash": "^4.17.21",
    "next": "^13.5.6",
    "react": "^18.2.0",
    "react-alice-carousel": "^2.8.0",
    "react-calendly": "^4.3.0",
    "react-clamp-lines": "^3.0.3",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.48.2",
    "react-wrap-balancer": "^1.1.0",
    "storyblok-js-client": "^6.2.0",
    "styled-components": "^5.3.11",
    "swiper": "^11.0.3",
    "usehooks-ts": "^2.9.1",
    "uuid": "^9.0.1",
    "yup": "^1.3.2"
  },
  "devDependencies": {
    "@aws-sdk/client-cloudfront": "^3.441.0",
    "@flare/eslint-config": "*",
    "@flare/tsconfig": "*",
    "@graphql-codegen/add": "^5.0.0",
    "@graphql-codegen/cli": "^5.0.0",
    "@graphql-codegen/introspection": "^4.0.0",
    "@graphql-codegen/typescript": "^4.0.1",
    "@graphql-codegen/typescript-operations": "^4.0.1",
    "@graphql-codegen/typescript-react-apollo": "^4.1.0",
    "@graphql-codegen/typescript-resolvers": "^4.0.1",
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.5.1",
    "@types/loadable__component": "^5.13.7",
    "@types/node": "^18.18.5",
    "@types/react-dom": "^18.2.7",
    "@types/styled-components": "^5.1.29",
    "@types/uuid": "^9.0.6",
    "@vitejs/plugin-react": "^4.1.1",
    "babel-plugin-styled-components": "^2.1.4",
    "fast-csv": "^4.3.6",
    "jsdom": "^22.1.0",
    "next-sitemap": "^4.2.3",
    "tsx": "^3.14.0",
    "vite": "^4.5.0",
    "vitest": "^0.34.6",
    "vitest-canvas-mock": "^0.3.3"
  },

i had the same issue just now. here’s mine.

{
    "@builder.io/dev-tools": "^0.2.6",
    "@builder.io/react": "^3.1.1",
    "@builder.io/sdk": "^2.1.1",
    "@segment/analytics-next": "^1.62.0",
    "@tabler/icons-react": "^2.44.0",
    "@twilio-paste/core": "^20.7.0",
    "@twilio-paste/design-tokens": "^10.4.0",
    "@twilio-paste/icons": "^12.2.2",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18",
    "react-helmet": "^6.1.0",
    "react-use-cart": "^1.13.0",
    "shortid": "^2.2.16"
  }