Gatsby: Tutorial Part Four has problems with old version of Emotion

[winehook]

Description

Going through the Part Four of the tutorial, I'm getting all kinds of Emotion-related errors. They seem to have to do with react-emotion being deprecated and we're supposed to use @emotion/styled instead. More info here: https://www.npmjs.com/package/react-emotion

Steps to reproduce

Go through the tutorial Part Four, starting from a brand-new directory. The npm install stuff all works, and creating/editing the .js files works as well. But loading the page generates an error message that says

Error: The package "react-emotion" has been replaced by "@emotion/styled" in version 10. See https://emotion.sh/docs/migrating-to-emotion-10 for more information on migrating.

If I do a separate npm install of both @emotion/styled and its required @emotion/core, and then change the import to import css from @emotion/styled instead of react-emotion, I get a different sort of error that appears to be due to API differences in the new @emotion/styled package. Those errors look like this:

TypeError: Object(...) is not a function

I'm quite new to all this, so going any farther is getting beyond my current React/Gatsby debugging abilities.

If I strip out the import { css } line from layout.js, and remove all the CSS stuff completely from that layout, the pages will load but they look completely unstyled.

Expected result

Pages should render with no errors.

Actual result

Pages will not render at all until all the emotion-related CSS stuff is stripped out of layout.js, at which point the pages look completely unstyled and not very attractive. I don't particularly care, since I'm interested in the data part of this tutorial, but thought you should know.

Environment

System:
OS: macOS 10.14.1
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
Browsers:
Chrome: 70.0.3538.110
Firefox: 63.0.1
Safari: 12.0.1
npmPackages:
gatsby: ^2.0.33 => 2.0.56
gatsby-plugin-emotion: ^2.0.6 => 2.0.6
gatsby-plugin-typography: ^2.2.1 => 2.2.1

[DSchau]

Emotion 10 must have _just_ dropped recently (looks like yesterday).

As such, we'll probably have some work to do here to update plugin stuff, documentation, etc.

In the interim, could you share some more detail as to the error with using react-emotion specifically? It seems odd that that would be an error, it should be a warning so we may have to reach out to the emotion team to see if something went awry there.

[winehook]

Absolutely -- I figured it was something very recent, but didn't quite realize it was THAT recent!

If I put in the line in layout.js that says

import { css } from "react-emotion"

I get this on every page load:

Error: The package "react-emotion" has been replaced by "@emotion/styled" in version 10. See https://emotion.sh/docs/migrating-to-emotion-10 for more information on migrating.

Below that is a list that says '23 stack frames were collapsed' and I can open that to see the specific errors in the chain.

I wonder if I did something to peg the install of emotion to a previous version, if that would help -- I did not have it previously installed in any fashion, so the only version on my machine is the latest.

Screenshot attached. Definitely let me know if I can be of further assistance. I'm just proceeding with the tutorial with no CSS and the rest of it is working fine.

[DSchau]

@winehook got it! We should (in general!) pin dependencies to major versions, e.g. in the tutorial instructions like emotion@^9.0.0 react-emotion@^9.0.0 would be a good idea.

For now - how about the following command to get this all ironed out? Looks like [email protected] is the one that ships with the error.

yarn add gatsby-plugin-emotion@latest emotion@^9.0.0 react-emotion@^9.0.0 emotion-server@^9.0.0

or with npm

npm i --save gatsby-plugin-emotion@latest emotion@^9.0.0 react-emotion@^9.0.0 emotion-server@^9.0.0

This should be the ticket, so going to close this out. But we definitely have more to do here, so I'll add a new issue so we can get our documentation updated for Emotion 10 as soon as possible!

Please feel free to re-open if this, in fact, hasn't fixed your issue (😱) or if we can help further. Thanks for using Gatsby! 💪

[LekoArts]

Alternatively the tutorial could switch to styled-components? @DSchau
imo easier syntax, less different imports

[DSchau]

@LekoArts yeah, it's becoming more and more appealing. My two reasons for preferring emotion (style objects and the css prop) are both now possible with styled-components 🤷‍♂️ There used to be some slight perf/size improvements in emotion but not sure if that's still the case or not.

I'm definitely not _against_ the change by any means.

[LekoArts]

According to the announcement the size/perf improvements that emotion once had are nearly gone (because styled-components got better).

I think styled-components is better for beginners, e.g. smaller chance of wrong imports.

[winehook]

Boom -- yes, pinning to 9.0 worked perfectly. Now my ravenous pandas have a beautifully laid out page around them as they eat. Wow, thank you all for such quick and helpful responses. Just getting into the world of Gatsby for the first time, but this is sure a promising start. Thanks all.