Блог

Я использую Emotion для создания стилизованных компонентов в своих проектах, и теперь это вызывает у меня проблемы. Я устанавливаю его следующим образом:

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

И, например, если я хочу использовать его в компоненте заголовка, я делаю это:

 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;
 

Но когда я запускаю gatsby development, он выдает мне эту ошибку

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

Кто-нибудь может мне помочь?

Мой файл package.json

 "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"
  },
 

и мой файл gatsby-config:

 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`,
  ],
}
 

Это происходит потому, что в Emotion 11 изменились имена пакетов. Я не верю gatsby-plugin-emotion , что он еще не обновлен, так что эта ошибка, вероятно, исходит из кода плагина.

Если вы предпочитаете использовать уже написанный вами код, следуйте документам Emotion версии 10 и установите версию зависимости для @emotion / core на «~ 10.0.0» в вашем package.lock файле.

Вам не нужен @emotion / react в версии 10. Вам не нужен @emotion/styled, если вы не хотите использовать стилизованные компоненты (например const Foo = styled("div")`font-size: 14px;`; ).

Удалите свой @emotion/core и запустите npm install снова. Затем в вашем компоненте просто используйте синтаксис, который точно соответствует вашему коду, или используйте что-то вроде:

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

const color = 'white'

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