question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@emotion/core keyframes missing scope after update

See original GitHub issue

Describe the bug Getting TypeError: Cannot read property 'name' of undefined when running a keyframe against theme-ui 9.1.0 Error is coming from this.name referenced inside the toString function:

// @emotion/react 
var keyframes = function keyframes() {
  var insertable = css.apply(void 0, arguments);
  var name = "animation-" + insertable.name; // $FlowFixMe

  return {
    name: name,
    styles: "@keyframes " + name + "{" + insertable.styles + "}",
    anim: 1,
    toString: function toString() {
      return "_EMO_" + this.name + "_" + this.styles + "_EMO_"; // <---- this line
    }
  };
};

To Reproduce For starters I’m updating from 0.3.1 so I’m a bit worried I’ve missed a step along the way…

First I’m defining a keyframe and using it inside my component like so:

Code example
/** @jsxImportSource theme-ui */
import { Flex } from "theme-ui";
import { useResponsiveValue } from "@theme-ui/match-media";
import { keyframes } from "@emotion/react";
import { useState } from "react";

const fadeInLeft = keyframes({
  from: { opacity: 0, transform: "translate3d(-100%, 0, 0)" },
  to: { opacity: 1, transform: "translate3d(0, 0, 0)" },
});

export const VolumeControl = () => {
  const [isOpen, setOpen] = useState(false);

  return (<div sx={{ position: "relative" }}>
      <Button
          label={'sometext'}
          onClick={() => {
            setOpen(!isOpen);
          }}
      />
     {isOpen && (
        <div
          sx={{
            position: "absolute",
            left: ["58px", "70px", "85px"],
            bottom: ["6px", "10px"],
            backgroundColor: "primary",
            animationName: fadeInLeft,
            animationDuration: ".2s",
          }}
        >
            <Flex sx={{ flexDirection: "row", alignItems: "center" }}>
                    <p></p>
             </Flex>
        </div>
    )}
  </div>);
}

I do this in a few places in the app and it only errors when the keyframe is triggered. I’ve omitted some details to make the usage a bit clearer.

Expected behavior Previous functionality is that the styles get applied as expected without throwing a runtime error.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context I’ll post some my dependencies here. Not sure how much they’ll help but maybe something will jump out at ya:

`package.json`
{
  "name": "react-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@amplitude/react-amplitude": "1.0.0",
    "@babel/core": "^7.0.0",
    "@giphy/js-fetch-api": "3.0.0",
    "@giphy/react-components": "2.4.0",
    "@iconscout/react-unicons": "1.1.6",
    "@sentry/react": "6.5.1",
    "@sentry/tracing": "6.5.1",
    "@stripe/react-stripe-js": "1.4.1",
    "@stripe/stripe-js": "1.13.2",
    "@theme-ui/core": "^0.9.1",
    "@theme-ui/css": "^0.9.1",
    "@theme-ui/match-media": "0.9.1",
    "amplitude-js": "8.1.0",
    "aws-amplify": "3.3.2",
    "compromise": "13.11.2",
    "copy-to-clipboard": "3.3.1",
    "formik": "2.2.9",
    "jwt-decode": "3.1.2",
    "node-sass": "4.14.1",
    "password-validator": "5.1.1",
    "react": "17.0.2",
    "react-beforeunload": "2.4.0",
    "react-countdown": "2.2.1",
    "react-dom": "17.0.2",
    "react-redux": "7.2.4",
    "react-router-dom": "5.2.0",
    "react-scripts": "4.0.3",
    "react-spinners-kit": "1.9.1",
    "react-tooltip": "4.2.21",
    "redux": "^4.1.0",
    "redux-devtools-extension": "2.13.9",
    "redux-logger": "3.0.6",
    "redux-observable": "1.2.0",
    "redux-persist": "6.0.0",
    "reselect": "4.0.0",
    "rxjs": "6.6.7",
    "store": "2.0.12",
    "theme-ui": "0.9.1",
    "typescript": "4.3.2",
    "yup": "0.32.9",
    "yup-phone": "1.2.19"
  },
  "scripts": {
    "start": "npx react-app-rewired start",
    "build": "npx react-app-rewired build",
    "postbuild": "cp _redirects build/",
    "build:dev": "cross-env REACT_APP_ENV=development REACT_APP_VERSION=$npm_package_version npm run build",
    "build:prod": "cross-env REACT_APP_ENV=production REACT_APP_VERSION=$npm_package_version npm run build",
    "test": "npx react-app-rewired test",
    "eject": "npx react-app-rewired eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public -o storybook-dist/"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "globalSetup": "./setupTests.js"
  },
  "devDependencies": {
    "@giphy/js-types": "3.1.0",
    "@storybook/addon-a11y": "6.2.9",
    "@storybook/addon-actions": "6.2.9",
    "@storybook/addon-knobs": "6.2.9",
    "@storybook/addon-links": "6.2.9",
    "@storybook/addon-storysource": "6.2.9",
    "@storybook/addons": "6.2.9",
    "@storybook/preset-create-react-app": "3.1.7",
    "@storybook/react": "6.2.9",
    "@testing-library/dom": "^7.31.2",
    "@testing-library/jest-dom": "5.13.0",
    "@testing-library/react": "11.2.7",
    "@testing-library/user-event": "13.1.9",
    "@types/amplitude-js": "5.11.1",
    "@types/jest": "26.0.23",
    "@types/jwt-decode": "3.1.0",
    "@types/react": "17.0.11",
    "@types/react-beforeunload": "2.1.0",
    "@types/react-dom": "17.0.7",
    "@types/react-redux": "7.1.16",
    "@types/react-router-dom": "5.1.7",
    "@types/redux-logger": "3.0.8",
    "@types/store": "2.0.2",
    "@types/theme-ui": "0.6.0",
    "@types/yup": "0.29.11",
    "@typescript-eslint/eslint-plugin": "^4.26.1",
    "@typescript-eslint/parser": "^4.26.1",
    "cross-env": "7.0.3",
    "react-app-rewired": "2.1.8",
    "react-docgen": "^5.4.0",
    "testdouble": "3.16.1",
    "testdouble-jest": "2.0.0"
  },
  "resolutions": {
    "babel-loader": "8.1.0",
    "@emotion/styled": "^11.0.0"
  }
}

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
hasparuscommented, Jun 11, 2021

Hey @hoffination 👋 Thanks for the issue!

Could you send me your lockfile? (package-lock.json or yarn.lock) Also, does it break on Theme UI 0.5.0 or 0.6.0? We updated to Emotion 11 in 0.5 I think, but I’m using keyframes in my projects and didn’t see this problem 🤔

A workaround I see is calling that toString manually, but it’s less than ideal…

1reaction
hasparuscommented, Mar 21, 2022

🚀 Issue was released in v0.14.0 🚀

Read more comments on GitHub >

github_iconTop Results From Across the Web

Keyframes - Emotion
keyframes takes in a css keyframe definition and returns an object you can use in styles. You can use strings or objects just...
Read more >
How to apply custom animation effect @keyframes in MUI?
Here is an example demonstrating the keyframes syntax within makeStyles : import React from "react"; import ReactDOM from "react-dom"; ...
Read more >
After Effects Quick Tip: Missing Keyframes - YouTube
O hey there doods, here is another 1 minute quick tip for you guys. Have you ever worked on a project and not...
Read more >
@emotion/css | Yarn - Package Manager
The @emotion/css package is framework agnostic and the simplest way to use Emotion. Table of Contents. Quick Start; API. Generate Class Names —...
Read more >
FAQs - styled-components
Total rewrite of the core stylesheet engine, tuned for performance. New hooks-based component ... import styled, { css, keyframes } from 'styled-components'.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found