Fix pragma

system-ui/theme-ui#1160

frontend/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "@babel/plugin-transform-react-jsx",
+    {
+      "runtime": "classic",
+      "importSource": "theme-ui",
+      "pragmaFrag": "React.Fragment",
+      "throwIfNamespace": false,
+    }]
+  ]
+}

frontend/package.json

@@ -16,6 +16,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.2.5",
+    "@babel/plugin-transform-react-jsx": "^7.12.1",
+    "@babel/preset-react": "^7.12.1",
     "@emotion/core": "^10.0.35",
     "@graphql-codegen/add": "^2.0.0",
     "@graphql-codegen/cli": "^1.19.0",
@@ -45,17 +47,17 @@
     "next-with-apollo": "^5.1.0",
     "puppeteer": "^5.4.1",
     "puppeteer-core": "^5.4.1",
-    "react": "^17.0.1",
+    "react": "16.13.1",
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",
-    "react-dom": "^17.0.1",
+    "react-dom": "16.13.1",
     "react-intl": "^5.8.8",
     "react-lazyload": "^3.1.0",
     "react-select": "^3.1.0",
     "react-use-form-state": "^0.13.2",
     "react-use-sync-scroll": "^0.1.0",
     "styled-system": "^5.1.5",
-    "theme-ui": "0.4.0-rc.1",
+    "theme-ui": "0.4.0-rc.5",
     "use-local-storage-state": "^5.1.0",
     "use-onclickoutside": "^0.3.1",
     "yup": "^0.29.3"
@@ -79,12 +81,12 @@
     "typescript": "^4.0.5"
   },
   "resolutions": {
-    "@theme-ui/core": "0.4.0-rc.1",
-    "@theme-ui/css": "0.4.0-rc.1",
-    "@theme-ui/mdx": "0.4.0-rc.1",
-    "@theme-ui/theme-provider": "0.4.0-rc.1",
-    "@theme-ui/components": "0.4.0-rc.1",
-    "@theme-ui/color-modes": "0.4.0-rc.1",
-    "theme-ui": "0.4.0-rc.1"
+    "@theme-ui/core": "0.4.0-rc.5",
+    "@theme-ui/css": "0.4.0-rc.5",
+    "@theme-ui/mdx": "0.4.0-rc.5",
+    "@theme-ui/theme-provider": "0.4.0-rc.5",
+    "@theme-ui/components": "0.4.0-rc.5",
+    "@theme-ui/color-modes": "0.4.0-rc.5",
+    "theme-ui": "0.4.0-rc.5"
   }
 }

frontend/src/app/profile/logout.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { useApolloClient } from "@apollo/client";
 import Router from "next/router";
 import { useCallback } from "react";

frontend/src/app/profile/my-orders.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { FormattedMessage } from "react-intl";
 import { Box, Flex, Heading, jsx, Text } from "theme-ui";
 

frontend/src/app/profile/my-profile.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { FormattedMessage } from "react-intl";
 import { Box, Heading, jsx, Text } from "theme-ui";
 

frontend/src/app/profile/my-submissions.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { FormattedMessage } from "react-intl";
 import { Box, Heading, jsx } from "theme-ui";
 

frontend/src/components/article/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { Fragment } from "react";
 import { Box, Heading, jsx, Text } from "theme-ui";
 

frontend/src/components/button/button.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { useEffect, useRef, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { Button as ThemeButton, jsx } from "theme-ui";

frontend/src/components/cfp-form/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { ApolloError } from "@apollo/client";
 import React, { Fragment, useEffect } from "react";
 import { FormattedMessage } from "react-intl";

frontend/src/components/cfp-introduction/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { Box, Grid, jsx, Text } from "theme-ui";

frontend/src/components/cfp-send-submission/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { useRouter } from "next/router";
 import { jsx } from "theme-ui";
 

frontend/src/components/day-selector/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { useRouter } from "next/router";
 import React from "react";
 import { Box, jsx, Select } from "theme-ui";

frontend/src/components/deadlines/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { Fragment } from "react";
 import { FormattedMessage } from "react-intl";
 import { jsx } from "theme-ui";

frontend/src/components/error-boundary/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import * as Sentry from "@sentry/browser";
 import { Component } from "react";
 import { Box, Heading, jsx, Text } from "theme-ui";

frontend/src/components/errors-list/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import React from "react";
 import { Box, jsx } from "theme-ui";
 

frontend/src/components/footer/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { Box, Grid, jsx } from "theme-ui";
 
 import { useFooterQuery } from "~/types";

frontend/src/components/grant-form/index.tsx

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import React, { Fragment, useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { useFormState } from "react-use-form-state";

frontend/src/components/grants-introduction/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { Box, Grid, jsx, Text } from "theme-ui";

frontend/src/components/grid-slider/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { useState } from "react";
 import { Box, Flex, Grid, Heading, jsx } from "theme-ui";
 

frontend/src/components/header/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { Fragment, useEffect, useRef } from "react";

frontend/src/components/header/profile-link.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { FormattedMessage } from "react-intl";
 import { jsx } from "theme-ui";
 

frontend/src/components/home-events/event-card.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { Box, Flex, Heading, jsx, Text } from "theme-ui";
 
 import { useCurrentLanguage } from "~/locale/context";

frontend/src/components/homepage-hero/buy-tickets-cta.tsx

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import React from "react";
 import { jsx, useThemeUI } from "theme-ui";
 

frontend/src/components/homepage-hero/index.tsx

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { Box, jsx } from "theme-ui";
 
 import { Link } from "../link";

frontend/src/components/hotel-form/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import moment from "moment";
 import { FormattedMessage } from "react-intl";
 import { Box, Flex, Heading, jsx } from "theme-ui";

frontend/src/components/illustrations/cfp.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import React from "react";
 import { jsx } from "theme-ui";
 

frontend/src/components/input-tag/index.tsx

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { useCallback } from "react";
 import { jsx } from "theme-ui";
 

frontend/src/components/input-wrapper/index.tsx

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import React from "react";
 import { Box, jsx, Text } from "theme-ui";
 

frontend/src/components/keynoters-section/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { Box, Flex, Heading, jsx, Text } from "theme-ui";
 
 import { useKeynotesSectionQuery } from "~/types";

frontend/src/components/link/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import NextLink from "next/link";
 import React from "react";
 import { Box, jsx, Link as ThemeLink } from "theme-ui";

frontend/src/components/login-form/index.tsx

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import Router, { useRouter } from "next/router";
 import { useEffect } from "react";
 import { FormattedMessage } from "react-intl";

frontend/src/components/map-with-link/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { jsx } from "theme-ui";
 
 import { useMapWithLinkQuery } from "~/types";

frontend/src/components/marquee/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { keyframes } from "@emotion/core";
 import { Flex, jsx, Text } from "theme-ui";
 

frontend/src/components/newsletter/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import React, { useCallback, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { Box, Heading, Input, jsx, Text } from "theme-ui";

frontend/src/components/page-loading/index.tsx

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { FormattedMessage } from "react-intl";
 import { Box, Heading, jsx } from "theme-ui";
 

frontend/src/components/ranking-page/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { useFormState } from "react-use-form-state";

frontend/src/components/schedule-view/events.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import React from "react";
 import { Box, Flex, jsx, Text } from "theme-ui";
 

frontend/src/components/schedule-view/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import React, { Fragment, useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { Box, Flex, Heading, jsx } from "theme-ui";

frontend/src/components/schedule-view/placeholder.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import React from "react";
 import { Box, jsx } from "theme-ui";
 

frontend/src/components/schedule-view/schedule.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import React, { useRef } from "react";
 import useSyncScroll from "react-use-sync-scroll";
 import { Box, Grid, jsx } from "theme-ui";

frontend/src/components/schedule-view/staff/items-panel.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import React, { useState } from "react";
 import { Box, Heading, Input, jsx } from "theme-ui";
 

frontend/src/components/select/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import React, { CSSProperties } from "react";
 import { default as ReactSelect, Props } from "react-select";
 import { jsx } from "theme-ui";

frontend/src/components/signup-form/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { useRouter } from "next/router";
 import React, { useCallback, useLayoutEffect } from "react";
 import { FormattedMessage } from "react-intl";

frontend/src/components/social-links/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { Flex, jsx } from "theme-ui";
 
 import Facebook from "../icons/social/facebook";

frontend/src/components/social-links/social-circle.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { jsx } from "theme-ui";
 
 export const SocialCircle: React.SFC<{ color: string; variant?: string }> = ({

frontend/src/components/social-login-success/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { useRouter } from "next/router";
 import React, { useEffect } from "react";
 import { FormattedMessage } from "react-intl";

frontend/src/components/speaker-detail/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { Fragment } from "react";
 import { Box, Grid, jsx } from "theme-ui";
 

frontend/src/components/sponsors-section/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { Box, Heading, jsx } from "theme-ui";
 
 import { SponsorsGrid } from "./sponsors-grid";

frontend/src/components/sponsors-section/sponsors-grid.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import LazyLoad from "react-lazyload";
 import { Box, Grid, jsx } from "theme-ui";
 

frontend/src/components/styles.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import { Global } from "@emotion/core";
 import { jsx } from "theme-ui";
 

frontend/src/components/submission-accordion/index.tsx

@@ -1,4 +1,6 @@
+
 /** @jsx jsx */
+
 import React, { Fragment, useCallback, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { Box, Grid, Heading, jsx, Text } from "theme-ui";