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

Technical Questions
1

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

image
image983×308 57.2 KB

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?

2

Hello neri,

Would you be able to share all of your dependencies?

3

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

4 
  "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"
  },
5

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"
  }
6

Running into this issue as well. We are running app router along side page router for the moment. This also causes an issue in trying to live update the page. We first have to publish the page to see the updates.