Настроить плагин эмоций babel с помощью NextJS?

Я пытаюсь настроить плагин эмоций babel с помощью NextJS.

Я создал новый проект NextJS. Затем установил @emotion/core и babel-plugin-emotion

В package.json:

  "dependencies": {
    "@emotion/core": "^10.0.15",
    "babel-plugin-emotion": "^10.0.15",

Я создал файл .babelrc в корне моего проекта следующим образом:

{
  "presets": ["next/babel"],
  "plugins": ["emotion"]
}

Если я использую эмоции стандартным образом, это работает:

import React from "react";
/** @jsx jsx */
import { css, jsx } from "@emotion/core";

const style = css`
  opacity: 0.4;
  background: gold;
`;

function Component({ number }) {
  return (
    <div css={style} />
  );
}

Я думал, что плагин babel позволяет мне использовать этот более чистый синтаксис:

import React from "react";
import { css } from "@emotion/core";

const style = css`
  opacity: 0.4;
  background: gold;
`;

function Component({ number }) {
  return (
    <div css={style} />
  );
}

Однако это не работает. Это визуализированный HTML:

<div css="[object Object]" />

next.js emotion babeljs
person Evanss    schedule 15.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Не уверен, что это окончательное изменение, но вот моя конфигурация для существующего проекта эмоций, и я сослался на эти Emotion документирует при настройке

// .babelrc.js file

env: {
    development: {
      presets: [
        "next/babel",
        [
          require.resolve('@emotion/babel-preset-css-prop'),
          {
            sourceMap: true,
            autoLabel: true,
          },
        ],
      ],
    },
    production: {
      presets: ["next/babel", [require.resolve('@emotion/babel-preset-css-prop'), { hoist: true }]],
    },
  },
person Emma    schedule 07.10.2019