Errors following quickstart

[haf]

When following the NextJS quickstart (with SDK 1 as it's recommended), or the Remix quickstart (with SDK 1 or SDK 2), when you run the server, you get this warning:

Missing @builder.io/widgets installation, please install and import @builder.io/widgets to use Accordion in your content, more info here: https://github.com/BuilderIO/builder/tree/main/packages/widgets

When you add this dependency; you get a whole bunch of warnings from npm, and when running the project you still see the warning you tried to solve in the first place:

❯ npm remove @builder.io/widgets
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: react-masonry-component@6.3.0
npm warn Found: react@18.3.1
npm warn node_modules/react
npm warn   peer react@">=16.8.0" from @builder.io/react@5.0.5
npm warn   node_modules/@builder.io/react
npm warn     peer @builder.io/react@">=1.1.0" from @builder.io/widgets@2.0.0
npm warn     node_modules/@builder.io/widgets
npm warn     1 more (the root project)
npm warn   12 more (@builder.io/react-hydration-overlay, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^0.14.0 || ^15.0.0-0 || ^16.0.0-0 || ^17.0.0" from react-masonry-component@6.3.0
npm warn node_modules/@builder.io/widgets/node_modules/react-masonry-component
npm warn   react-masonry-component@"^6.2.1" from @builder.io/widgets@2.0.0
npm warn   node_modules/@builder.io/widgets
npm warn
npm warn Conflicting peer dependency: react@17.0.2
npm warn node_modules/react
npm warn   peer react@"^0.14.0 || ^15.0.0-0 || ^16.0.0-0 || ^17.0.0" from react-masonry-component@6.3.0
npm warn   node_modules/@builder.io/widgets/node_modules/react-masonry-component
npm warn     react-masonry-component@"^6.2.1" from @builder.io/widgets@2.0.0
npm warn     node_modules/@builder.io/widgets
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: react-slick@0.28.1
npm warn Found: react@18.3.1
npm warn node_modules/react
npm warn   peer react@">=16.8.0" from @builder.io/react@5.0.5
npm warn   node_modules/@builder.io/react
npm warn     peer @builder.io/react@">=1.1.0" from @builder.io/widgets@2.0.0
npm warn     node_modules/@builder.io/widgets
npm warn     1 more (the root project)
npm warn   12 more (@builder.io/react-hydration-overlay, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0" from react-slick@0.28.1
npm warn node_modules/@builder.io/widgets/node_modules/react-slick
npm warn   react-slick@"^0.28.1" from @builder.io/widgets@2.0.0
npm warn   node_modules/@builder.io/widgets
npm warn
npm warn Conflicting peer dependency: react@17.0.2
npm warn node_modules/react
npm warn   peer react@"^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0" from react-slick@0.28.1
npm warn   node_modules/@builder.io/widgets/node_modules/react-slick
npm warn     react-slick@"^0.28.1" from @builder.io/widgets@2.0.0
npm warn     node_modules/@builder.io/widgets
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: react-slick@0.28.1
npm warn Found: react-dom@18.3.1
npm warn node_modules/react-dom
npm warn   peer react-dom@">=16.8.0" from @builder.io/react@5.0.5
npm warn   node_modules/@builder.io/react
npm warn     peer @builder.io/react@">=1.1.0" from @builder.io/widgets@2.0.0
npm warn     node_modules/@builder.io/widgets
npm warn     1 more (the root project)
npm warn   5 more (@builder.io/react-hydration-overlay, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react-dom@"^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0" from react-slick@0.28.1
npm warn node_modules/@builder.io/widgets/node_modules/react-slick
npm warn   react-slick@"^0.28.1" from @builder.io/widgets@2.0.0
npm warn   node_modules/@builder.io/widgets
npm warn
npm warn Conflicting peer dependency: react-dom@17.0.2
npm warn node_modules/react-dom
npm warn   peer react-dom@"^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0" from react-slick@0.28.1
npm warn   node_modules/@builder.io/widgets/node_modules/react-slick
npm warn     react-slick@"^0.28.1" from @builder.io/widgets@2.0.0
npm warn     node_modules/@builder.io/widgets

removed 43 packages, and audited 574 packages in 2s

165 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

[haf]

Ping

[samijaber]

@haf these errors are caused by an upstream dependency (react-masonry-component) which does not explicitly state support for react 18 in its configuration. You can avoid the warning by following the steps suggested here: eiriklv/react-masonry-component#168 (comment)

If the linked issue does not work, you might have to try the variation below:

  "overrides": {
    "@builder.io/widgets": {
      "react-masonry-component": {
        "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0 || ^17.0.0 || ^18.0.0"
      }
    }
  },