Theme-ui: Theme-ui + latest Gatsby seem to have issues

[gvocale]

Describe the bug
When I update all packages to latest into gatsby-starter-theme-ui, Theme Ui is not working correctly anymore.

To Reproduce
Steps to reproduce the behavior:

1. Create a new gatsby project from gatsby-starter-theme-ui

gatsby new test https://github.com/KyleAMathews/gatsby-starter-theme-ui

1. Start site

cd test
gatsby develop

1. All works good
2. Now update all packages

yarn upgrade-interactive --latest

1. Start gatsby again

gatsby develop

1. Now it doesn't work anymore. The gatsby site works, but theme-ui styles don't get applied anymore.

Before

After

Packages installed

{
  "name": "gatsby-starter-default-theme-ui",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby & Theme UI",
  "version": "0.1.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "@emotion/core": "^10.0.35",
    "@mdx-js/react": "^1.6.16",
    "@theme-ui/components": "^0.3.1",
    "@theme-ui/presets": "^0.3.0",
    "gatsby": "^2.24.47",
    "gatsby-image": "^2.4.16",
    "gatsby-plugin-manifest": "^2.4.23",
    "gatsby-plugin-offline": "^3.2.23",
    "gatsby-plugin-react-helmet": "^3.3.10",
    "gatsby-plugin-sharp": "^2.6.27",
    "gatsby-plugin-theme-ui": "^0.3.0",
    "gatsby-source-filesystem": "^2.3.24",
    "gatsby-theme-style-guide": "^0.3.1",
    "gatsby-transformer-sharp": "^2.5.13",
    "normalize.css": "^8.0.1",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.1.0",
    "theme-ui": "^0.3.1"
  },
  "devDependencies": {
    "prettier": "^2.0.5"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

[gvocale]

Downgrading gatsby to 2.21 seems to fix it somehow.

[gvocale]

Actually, even with Gatsby 2.21 specified in package.json, every time I install a new package it breaks again. I have to then re-install again yarn add [email protected] for it to work again. It is like if every time i yarn install a different package, something breaks.

[mtully]

@gvocale I was having a similar issue, but was able to resolve by running yarn upgrade.

[gvocale]

Nice! that seemed to have worked for me too!

[kuworking]

For me it has happened the same

• props.theme was empty (yet a console.log placed in gatsby-plugin-theme-ui/index.js worked)
• after a yarn upgrade it was full again

Since 2 hours ago I already run a yarn upgrade followed by various yarns I guess I'm facing the same behavior described by @gvocale

  "dependencies": {
    "@emotion/core": "10.0.35",
    "@emotion/styled": "10.0.27",
    "gatsby": "2.24.14",
    "gatsby-plugin-compile-es6-packages": "2.1.0",
    "gatsby-plugin-emotion": "4.3.10",
    "gatsby-plugin-netlify": "2.3.13",
    "gatsby-plugin-theme-ui": "0.3.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "theme-ui": "0.3.1"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "7.10.4",
    "babel-eslint": "10.1.0",
    "babel-plugin-emotion": "10.0.33"
  },

[lcdsmao]

I also have this issue and yarn upgrade cannot solve this. 😢

  "dependencies": {
    "gatsby": "^2.24.67",
    "gatsby-plugin-theme-ui": "^0.3.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "theme-ui": "^0.3.1"
  },
  "devDependencies": {
    "prettier": "2.1.2"
  },

[johngrasty]

I seem to have this problem when @emotion/core is at 10.0.35, but it disappears on 10.0.28. I have not had time (nor probably in this case, the ability) to track down the root cause.

[lachlanjc]

I suspect it’s an Emotion version mis-match—check your yarn.lock & make sure they’re all the same version. Additionally, you shouldn’t be installing @emotion/core manually—that may be the source of some of these issues. Closing as a discussion.