react-multi-carousel | A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering | Server Side Rendering library

Because you are missing style import. Add this to your page:

Try setting the centerMode property to true on the Carousel component.

From the error it is evident that you haven't defined ButtonOne, ButtonTwo & ButtonThree anywhere but they are being used.

From the documentation of react-multi-carousel we can customise the dots or arrows and can be customised by providing a custom component as a prop customButtonGroup.

In your implementation a custom button group is provided but the components(ButtonOne, ButtonTwo & ButtonThree) used inside are never declared.

So, you can define a custom button group something like below

Using ssr is not sufficient on its own, the deviceType prop also needs to be set for server-side rendering.

There's not much debug in the question however, to me, it seems that you are using some dependencies outside React's scope, which may potentially block React's hydration process, which may explain the problem described. For example, using Leaflet instead of React's Leaflet or (depending on its implementation) Bootstrap instead of React's Boostrap.

You should be able to change all React-unfriendly modules to React's ones without too much effort and that should fix your problems.

Keep in mind that if your project "work in develop and breaks in build" doesn't mean that your project work or stops working, it just means that is working under certain and specific circumstances. Basically, and summarizing (to avoid extending the answer), gatsby develop uses the browser as an interpreter, where there are, among other things, global objects like window or document. However, gatsby build occurs in the Node server, where at the build time, there are not global objects because there are not even created yet, that the main reason why you may face a different behavior between both scenarios but doesn't mean that the project stopped working magically.

You can read further details in the Overview of Gatsby Build Process.

Another option, linked with blocking React's hydration, is that some component may be blocking that process because of its own behavior. Be careful when using global objects like window or document (or when importing modules that uses it), they use should be always be wrapped inside the following condition, as you can see from the docs:

When referencing window in a React component.

This seems to be a problem of installation of packages at first glance.

You can try removing node_modules folder and install all packages again with npm install or yarn install.

If this does not work then you can refer this post

React components don't use window.onload and componentDidMount is reserved for and valid only in class-based components. Functional components can use an useEffect React hook with empty dependency array to have the equivalent to componentDidMount lifecycle method.

If you're curious about anything called when the page switches,

When you see the documentation for that 'react-multi-carousel', There is a callback fuction called when a page is converted.

here

You need to use default import as the error suggests import Carousel from "react-multi-carousel".