CODEWITHSUNDEEP
cssreactjsgatsbystyled-componentsemotion
Gab
Gab

Reputation: 1

Problems with Emotion (Styled Components) on Gatsby

I use Emotion to make styled components on my projects and now it is giving me problems. I install it like this:

npm i @emotion/react @emotion/styled gatsby-plugin-emotion

And, for example, if I want to use it in the Header component I do this:

import React from 'react';
import { Link } from 'gatsby';
import Navegacion from './navegacion';
import { jsx, css } from '@emotion/react';

const Header = () => {
  return (
    <header
      css={css`
        background-color: #0d283b;
        padding: 1rem;
      `}
    >
      <div
        css={css`
          max-width: 120rem;
          margin: 0 auto;
          text-align: center;
          @media (min-width: 768px) {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        `}
      >
        <Link>Bienes Raíces</Link>
        <Navegacion />
      </div>
    </header>
  )
}
 
export default Header;

But when I run gatsby develop, It give me this error

`WebpackError: The `@emotion/core` package has been renamed to `@emotion/react`. Please import it like this `import { jsx } from '@emotion/react'.

Someone can help me?

My package.json file

"dependencies": {
    "@emotion/core": "^11.0.0",
    "@emotion/react": "^11.1.1",
    "@emotion/styled": "^11.0.0",
    "gatsby": "^2.26.1",
    "gatsby-image": "^2.5.0",
    "gatsby-plugin-emotion": "^4.5.0",
    "gatsby-plugin-manifest": "^2.6.1",
    "gatsby-plugin-offline": "^3.4.0",
    "gatsby-plugin-react-helmet": "^3.4.0",
    "gatsby-plugin-sharp": "^2.8.0",
    "gatsby-source-filesystem": "^2.5.0",
    "gatsby-transformer-sharp": "^2.6.0",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0"
  },

and my gatsby-config file:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-emotion`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    // {
    //   resolve: `gatsby-plugin-manifest`,
    //   options: {
    //     name: `gatsby-starter-default`,
    //     short_name: `starter`,
    //     start_url: `/`,
    //     background_color: `#663399`,
    //     theme_color: `#663399`,
    //     display: `minimal-ui`,
    //     icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
    //   },
    // },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

Upvotes: 0

Views: 3005

Answers (2)

coreyward
coreyward

Reputation: 80041

This is happening because in Emotion 11 the package names have changed. I don't believe gatsby-plugin-emotion is up to date yet, so that error is probably coming from the plugin code.

If you would prefer to use the code you have already written, follow the v10 Emotion docs and set the dependency version for @emotion/core to "~10.0.0" in your package.lock file.

You don't need @emotion/react in v10. You don't need @emotion/styled unless you want to use Styled Components (e.g. const Foo = styled("div")`font-size: 14px;`;).

Upvotes: 1

Ferran Buireu
Ferran Buireu

Reputation: 29320

Remove your @emotion/core and run npm install again. Then in your component just use the syntax as exactly they are in your code, or use something like:

import { css, jsx } from '@emotion/react'

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

Upvotes: 0

Related Questions