Gatsby: [Themes] Build error when adding `gatsby-theme-blog` to existing site

[pol-milian]

Description

Adding gatsby-theme-blog to an existing site doesn't work.

Steps to reproduce

1. Start a new Gatsby site
2. Add gatsby-theme-blog as a plugin
3. Fill with an example blog post following the template
4. Set basePath to /blog in gatsby-config.

Expected result

The site builds and I should have a blog with one post in my /blog path.

Actual result

I got an error:

There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html ReferenceError: Tag is not defined


> 1 | /** @jsx jsx */
    | ^
  2 | import { jsx, ThemeProvider, ColorMode } from 'theme-ui'
  3 | import React from 'react'
  4 | import theme from './index'


  WebpackError: ReferenceError: Tag is not defined

  - provider.js:1 Module../node_modules/gatsby-plugin-theme-ui/src/provider.js
    node_modules/gatsby-plugin-theme-ui/src/provider.js:1:1

  - gatsby-ssr.js:1 Module../node_modules/gatsby-plugin-theme-ui/gatsby-ssr.js
    node_modules/gatsby-plugin-theme-ui/gatsby-ssr.js:1:1

Environment

System:
OS: Windows 10
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Yarn: 1.16.0 - C:Program Files (x86)Yarnbinyarn.CMD
npm: 6.9.2 - C:Program Filesnodejsnpm.CMD
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: ^2.13.1 => 2.13.4
gatsby-image: ^2.2.4 => 2.2.4
gatsby-plugin-manifest: ^2.2.1 => 2.2.1
gatsby-plugin-netlify: ^2.1.0 => 2.1.0
gatsby-plugin-offline: ^2.2.0 => 2.2.1
gatsby-plugin-react-helmet: ^3.1.0 => 3.1.0
gatsby-plugin-react-svg: ^2.1.1 => 2.1.1
gatsby-plugin-sharp: ^2.2.2 => 2.2.2
gatsby-plugin-styled-components: ^3.1.0 => 3.1.0
gatsby-source-filesystem: ^2.1.2 => 2.1.2
gatsby-theme-blog: ^1.0.0 => 1.0.0
gatsby-transformer-sharp: ^2.2.1 => 2.2.1

[amberleyromo]

Hi! Can you share the repo where the error is happening? I tried to reproduce this by creating a new site from the default Gatsby starter and adding the blog theme, but wasn't able to repro.

[pol-milian]

I am trying to add it to this site => https://github.com/Polcius/portfolio

I am thinking it may have something to do with the fact I already have styled-components and a <Theme /> component, but IMO it should work.

[stefthoen]

I just started a new project with the gatsby-default-starter and have added gatsby-plugin-styled-components to gatsby-config.js and I get the same error. Commenting out that line makes the build succesfully compile.

[454de6e]

I can confirm the observation made by @stefthoen .

[datakurre]

Unfortunately, "dropping" gatsby-plugin-styled-components from gatsby-config also removes ssr-rendering of styled components.

As a fix, I followed https://emotion.sh/docs/styled, removed both styled-components and gatsby-plugin-styled-components, added emotion/styled, theme-ui, gatsby-plugin-theme-ui and added gatsby-plugin-theme-ui into gatsby-config. This restored ssr for my styled components with gatsby-theme-blog.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!