Make sure you have added this on top of your react code
<--->
/** @jsxRuntime classic /
/* @jsx jsx */
import styled from '@emotion/styled';
import { css, jsx } from '@emotion/react'
<---->
What is a pragma?
A pragma is a compiler directive. It tells the compiler how it should handle the contents of a file.
An example of this in JavaScript is 'use strict' mode. 'use strict' is a directive that enables JavaScript's Strict Mode, which is a way to opt in to a more restricted variant of JavaScript. It denotes that the code should be processed in a specific way.
What is JSX pragma?
JSX syntax on its own isn’t readable by the browser. In order to ship something readable to the browser, JSX needs to be converted to plain JavaScript.
Most React-based frameworks (like Gatsby), come with tooling already set up to support this conversion (usually Babel). How does that tooling know how to transform JSX? By default, the Babel plugin will convert JSX into JavaScript that calls the React.createElement function.
Top comments (0)