What does the comment /** @jsx jsx */ do in the Emotion CSS-in-JS library?

This is a custom pragma that tells the jsx transformer, in this case babel-plugin-transform-react what function to use to transform your jsx into plain javascript.

From the React Website:

A React component using jsx that looks like this:

class Hello extends React.Component {  render() {    return <div>Hello {this.props.toWhat}</div>;  }}

Will be transformed into this:

class Hello extends React.Component {  render() {    return React.createElement('div', null, `Hello ${this.props.toWhat}`);  }}

But by using that custom pragma, the compiled js might look like this:

class Hello extends React.Component {  render() {    return jsx('div', null, `Hello ${this.props.toWhat}`);  }}

This is useful because the jsx function might in some way enable the functionality of the library you're using by modifying or otherwise using the props or other data passed in from the jsx.

So therefor the answer to this question:

Are there any consequences from leaving out the /** @jsx jsx */

is yes. It will probably break the functionality of the library.

EDIT

This is mentioned in emotion's docs here: https://emotion.sh/docs/css-prop#jsx-pragma

The emotion jsx export allows you to put the css prop on any component, and have it automatically converted into a className prop.

/** @jsx jsx */ tells Babel to call the jsx variable instead of React.createElement, which you just imported from emotion