Gatsby: Gatsby develop works, gatsby build works, but gatsby serve displays wrong

[sashaboulouds]

Description

Hello guys,

I just built a website using Gatsby JS, as well as some peer dependencies — Anime JS, Styled Components, to name them.

gatsby develop works well
gatsby build works also well, no error messages

Still, when I run gatsby serve -p 9001 for instance, and when I go to localhost:9001, it displays really annoying errors :

• some sections appear twice
• no animations (AnimeJS rendering)
• no dynamic features (onClick, onHover..)

Steps to reproduce

git clone https://github.com/sashaboulouds/react.git
gatsby develop

Then go to : localhost:8000 to see the website as designed first

gatsby build
gatsby serve

Then go to : localhost:900 to see how it renders after building.

Environment

System:

OS: macOS 10.14
CPU: (4) x64 Intel(R) Core(TM) i5-4250U CPU @ 1.30GHz
Shell: 3.2.57 - /bin/bash

Binaries:

Node: 10.10.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm

Browsers:

Safari: 12.0

npmPackages:

gatsby: ^1.9.277 => 1.9.277
gatsby-link: ^1.6.46 => 1.6.46
gatsby-plugin-glamor: ^1.6.13 => 1.6.13
gatsby-plugin-react-helmet: ^3.0.2 => 3.0.2
gatsby-plugin-styled-components: ^3.0.4 => 3.0.4

npmGlobalPackages:

gatsby-cli: 2.4.5
gatsby: 1.9.277

[sidharthachatterjee]

Thank you for opening this, @sashaboulouds

We've fixed the issues you mentioned and sent you a pull request at https://github.com/sashaboulouds/react/pull/1

While we were at it, we also upgraded you to Gatsby v2 which is faster, smaller and more accessible

We fixed the following:

• gatsby-plugin-styled-components was installed but not added to gatsby-config.js
• gatsby-plugin-styled-components v3.0.4 was installed (which only works with Gatsby v2) but the project was using Gatsby v1
• Removed the custom css string include in html.js since the plugin takes care of that
• Fixed some invalid HTML in /components/Section/One.js which was causing the markup to be rendering incorrectly by the browser

The site looks good now on build. I'm closing this but please feel free to reopen if you're still seeing any of the issues 🙂

[sashaboulouds]

@sidharthachatterjee thanks a lot for your consistent and quick update... really really appreciated