{"action":"created","issue":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10182","repository_url":"https://api.github.com/repos/gatsbyjs/gatsby","labels_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10182/labels{/name}","comments_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10182/comments","events_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10182/events","html_url":"https://github.com/gatsbyjs/gatsby/issues/10182","id":385363468,"node_id":"MDU6SXNzdWUzODUzNjM0Njg=","number":10182,"title":"Tutorial Part Four has problems with old version of Emotion","user":{"login":"winehook","id":1001606,"node_id":"MDQ6VXNlcjEwMDE2MDY=","avatar_url":"https://avatars3.githubusercontent.com/u/1001606?v=4","gravatar_id":"","url":"https://api.github.com/users/winehook","html_url":"https://github.com/winehook","followers_url":"https://api.github.com/users/winehook/followers","following_url":"https://api.github.com/users/winehook/following{/other_user}","gists_url":"https://api.github.com/users/winehook/gists{/gist_id}","starred_url":"https://api.github.com/users/winehook/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/winehook/subscriptions","organizations_url":"https://api.github.com/users/winehook/orgs","repos_url":"https://api.github.com/users/winehook/repos","events_url":"https://api.github.com/users/winehook/events{/privacy}","received_events_url":"https://api.github.com/users/winehook/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-11-28T16:54:39Z","updated_at":"2018-11-28T17:18:49Z","closed_at":null,"author_association":"NONE","body":"## Description\r\n\r\nGoing 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\r\n\r\n### Steps to reproduce\r\n\r\nGo 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\r\n\r\nError: 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.\r\n\r\nIf 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:\r\n\r\nTypeError: Object(...) is not a function\r\n\r\nI'm quite new to all this, so going any farther is getting beyond my current React/Gatsby debugging abilities.\r\n\r\nIf 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.  \r\n\r\n### Expected result\r\n\r\nPages should render with no errors.\r\n\r\n### Actual result\r\n\r\nPages 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.\r\n\r\n### Environment\r\n\r\n  System:\r\n    OS: macOS 10.14.1\r\n    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz\r\n    Shell: 3.2.57 - /bin/bash\r\n  Binaries:\r\n    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node\r\n    npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm\r\n  Browsers:\r\n    Chrome: 70.0.3538.110\r\n    Firefox: 63.0.1\r\n    Safari: 12.0.1\r\n  npmPackages:\r\n    gatsby: ^2.0.33 => 2.0.56\r\n    gatsby-plugin-emotion: ^2.0.6 => 2.0.6\r\n    gatsby-plugin-typography: ^2.2.1 => 2.2.1\r\n"},"comment":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/comments/442529928","html_url":"https://github.com/gatsbyjs/gatsby/issues/10182#issuecomment-442529928","issue_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10182","id":442529928,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0MjUyOTkyOA==","user":{"login":"winehook","id":1001606,"node_id":"MDQ6VXNlcjEwMDE2MDY=","avatar_url":"https://avatars3.githubusercontent.com/u/1001606?v=4","gravatar_id":"","url":"https://api.github.com/users/winehook","html_url":"https://github.com/winehook","followers_url":"https://api.github.com/users/winehook/followers","following_url":"https://api.github.com/users/winehook/following{/other_user}","gists_url":"https://api.github.com/users/winehook/gists{/gist_id}","starred_url":"https://api.github.com/users/winehook/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/winehook/subscriptions","organizations_url":"https://api.github.com/users/winehook/orgs","repos_url":"https://api.github.com/users/winehook/repos","events_url":"https://api.github.com/users/winehook/events{/privacy}","received_events_url":"https://api.github.com/users/winehook/received_events","type":"User","site_admin":false},"created_at":"2018-11-28T17:18:49Z","updated_at":"2018-11-28T17:18:49Z","author_association":"NONE","body":"Absolutely -- I figured it was something very recent, but didn't quite realize it was THAT recent!\r\n\r\nIf I put in the line in layout.js that says \r\n\r\nimport { css } from \"react-emotion\"\r\n\r\nI get this on every page load:\r\n\r\nError: 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.\r\n\r\nBelow that is a list that says '23 stack frames were collapsed' and I can open that to see the specific errors in the chain.  \r\n\r\nI 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.  \r\n\r\nScreenshot 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.  \r\n\r\n<img width=\"796\" alt=\"image 2018-11-28 at 12 14 43 pm\" src=\"https://user-images.githubusercontent.com/1001606/49169315-849cf680-f307-11e8-8bb2-2fef091bc0c0.png\">\r\n\r\n"}}
{"actor":{"display_login":"winehook"}}