question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Theme-ui + latest Gatsby seem to have issues

See original GitHub issue

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 Screen Shot 2020-08-21 at 11 25 06 PM

Screen Shot 2020-08-21 at 11 28 13 PM

After Screen Shot 2020-08-21 at 11 28 26 PM

Screen Shot 2020-08-21 at 11 28 35 PM

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 <mathews.kyle@gmail.com>",
  "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"
  }
}

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
mtullycommented, Aug 23, 2020

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

1reaction
kuworkingcommented, Aug 28, 2020

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"
  },
Read more comments on GitHub >

github_iconTop Results From Across the Web

Gatsby Changelog | 5.3.0
Install gatsby@next and let us know if you have any issues. ... The latest version of "slugify" is ESM-only import slugify from "@sindresorhus/slugify" ......
Read more >
Troubleshooting Common Errors - Gatsby
Problems with the cache; Errors with common plugin configurations. Installing plugins for styling results in Generating SSR bundle failed; Issues with fs ...
Read more >
theme-ui/typography
I don't think there are any problems left to solve in this space, and, in my opinion, Tachyons has done the best job...
Read more >
Rebuilding Our Jekyll Website with Next.js and Theme UI
Gatsby has the same problems already mentioned. We have a backend for our Angular application and we're not going to rewrite it, ...
Read more >
How to adjust body background color with gatsby-plugin ...
A workaround I have found is to add initialColorMode: default and pass ... This is definitely a problem with theme ui. in your...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found