Emotion: [email protected] is broken

[titouancreach]

Hello,

After upgrading babel-plugin-emotion to the lastest version (10.0.13), we noticed that our build was broken.

After some investigation :male_detective: , we noticed that we use a special syntax that makes the plugin to crash during the build step. Here is an example (you can see a complete example in the reproduction repository)

import { css } from "emotion"
import cn from "classnames"

function CustomComponent({someBoolean}) {
    return (
        <div
            className={cn("static classname", {
                [css({ padding: 10 })]: someBoolean,
            })}
        >
            Hello World
        </div>
    )
}

It seems to occur when we use the css function as a computed key of an object.

Here is the message thrown in the console when running yarn build on the reproduction repository:

$ yarn build 
yarn run v1.16.0
$ node scripts/build.js
Creating an optimized production build...
Failed to compile.

./src/App.js
TypeError: Cannot read property 'charAt' of undefined
    at Array.forEach (<anonymous>)
    at Array.forEach (<anonymous>)


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The output of our real project is slightly more verbose, can help to debug:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
    TypeError: Cannot read property 'charAt' of undefined
        at getIdentifierName (/xxxxx/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:286:22)
        at getLabelFromPath (/xxxxx/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:206:19)
        at transformExpressionWithStyles (/xxxxx/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:468:19)
        at /xxxxx/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:589:43
        at Array.forEach (<anonymous>)
        at /xxxxx/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:581:48
        at Array.forEach (<anonymous>)
        at macro (/xxxxx/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:567:29)

I think the bug was introduced in this commit: https://github.com/emotion-js/emotion/commit/7bad392c3dccacb1d9adcaba63438d21030b9fd1#diff-8845e5e5474dfc2bb6c485679ab9dce3

For now, we downgraded babel-plugin-emotion.

To reproduce:

Here is a reproduction repository: https://github.com/titouancreach/babel-plugin-emotion-repro.
It was created with create-react-app, then I ejected to be able to add babel-plugin-emotion. You can find the crash by building the project using yarn build.

Version of packages:

• React: 16.8.6 (latest)
• Emotion: 10.0.9 (latest)
• babel-plugin-emotion: 10.0.13 (latest)

Thank you very much!

[hampusborgos]

Also affects us, especially difficult since it's hard to know where it crashes (ie. how to find where you use the offending syntax). This is on version 10.0.9 (not 10.0.13)

[nelsonlaquet]

Ran into the same problem. Thanks for the issue, @titouancreach, I was able to fix everything quickly without having to downgrade.

I agree with @hjnilsson; would it be possible to wrap the compilation code in a try...catch that reported which source file and line it was processing when it crashed?

[kevinSuttle]

Did v10.0.14 fix this for you?

[titouancreach]

@kevinSuttle no

[JSteunou]

@mitchellhamilton sorry to ping you like this but we still face this issue with the latest release, what can we do to help besides the repro repo than @titouancreach published?

[Andarist]

@JSteunou you could try fixing this and sending a PR, this issue doesn't seem overly complicated - you'd only have to do some debugging & codebase exploration, but you certainly shouldn't need any in-depth codebase knowledge to be able to tackle this one

[JSteunou]

Its seems to me. The only way I see is to revert https://github.com/emotion-js/emotion/commit/7bad392c3dccacb1d9adcaba63438d21030b9fd1#diff-8845e5e5474dfc2bb6c485679ab9dce3 and re-think it.

Or not

[titouancreach]

Thanks @JSteunou