I rely on Emotion for creating styled components in my projects, but I have encountered some issues. This is how I initially install it:
npm i @emotion/react @emotion/styled gatsby-plugin-emotion
For instance, when integrating it into the Header component, I follow these steps:
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;
However, upon running gatsby develop, an error occurs:
`WebpackError: The `@emotion/core` package has been renamed to `@emotion/react`. Please import it like this `import { jsx } from '@emotion/react'.
Can anyone offer assistance?
This is the content of 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"
},
In addition, here is 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`,
],
}