Update to latest babel versions

.github/workflows/build_test_deploy.yml

@@ -78,6 +78,8 @@ jobs:
             ./packages/next/native/next-swc.linux-x64-gnu.node
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
       - run: ./scripts/check-pre-compiled.sh
+        env:
+          NODE_OPTIONS: '--max_old_space_size=4096'
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testUnit:

examples/blog/pages/posts/markdown.md

@@ -94,6 +94,6 @@ export default function Nextra({ Component, pageProps }) {
 
 [^1]: Footnote **can have markup**
 
-  and multiple paragraphs.
+and multiple paragraphs.
 
 [^2]: Footnote text.

examples/cms-sanity/lib/sanity.js

@@ -9,6 +9,5 @@ export const imageBuilder = createImageUrlBuilder(sanityConfig)
 export const urlForImage = (source) =>
   imageBuilder.image(source).auto('format').fit('max')
 
-export const usePreviewSubscription = createPreviewSubscriptionHook(
-  sanityConfig
-)
+export const usePreviewSubscription =
+  createPreviewSubscriptionHook(sanityConfig)

examples/custom-server-hapi/next-wrapper.js

@@ -7,19 +7,18 @@ const nextHandlerWrapper = (app) => {
   }
 }
 
-const pathWrapper = (app, pathName, opts) => async (
-  { raw, query, params },
-  h
-) => {
-  const html = await app.render(
-    raw.req,
-    raw.res,
-    pathName,
-    { ...query, ...params },
-    opts
-  )
-  return h.response(html).code(raw.res.statusCode)
-}
+const pathWrapper =
+  (app, pathName, opts) =>
+  async ({ raw, query, params }, h) => {
+    const html = await app.render(
+      raw.req,
+      raw.res,
+      pathName,
+      { ...query, ...params },
+      opts
+    )
+    return h.response(html).code(raw.res.statusCode)
+  }
 
 module.exports = {
   pathWrapper,

examples/with-draft-js/pages/index.js

@@ -308,8 +308,7 @@ const initialData = {
     },
     {
       key: 'ecmnc',
-      text:
-        'Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.',
+      text: 'Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.',
       type: 'unstyled',
       depth: 0,
       inlineStyleRanges: [
@@ -330,8 +329,7 @@ const initialData = {
     },
     {
       key: '4481k',
-      text:
-        'With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.',
+      text: 'With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.',
       type: 'unstyled',
       depth: 0,
       inlineStyleRanges: [

examples/with-fauna/pages/index.js

@@ -80,11 +80,13 @@ const EntryForm = ({ onSubmit: onSubmitProp }) => {
       })
   }
 
-  const makeOnChange = (fieldName) => ({ target: { value } }) =>
-    setValues({
-      ...values,
-      [fieldName]: value,
-    })
+  const makeOnChange =
+    (fieldName) =>
+    ({ target: { value } }) =>
+      setValues({
+        ...values,
+        [fieldName]: value,
+      })
 
   const inputClasses = cn(
     'block py-2 bg-white dark:bg-gray-800',

examples/with-msw/mocks/handlers.js

@@ -17,8 +17,7 @@ export const handlers = [
         {
           id: '60333292-7ca1-4361-bf38-b6b43b90cb16',
           author: 'John Maverick',
-          text:
-            'Lord of The Rings, is with no absolute hesitation, my most favored and adored book by‑far. The triology is wonderful‑ and I really consider this a legendary fantasy series. It will always keep you at the edge of your seat‑ and the characters you will grow and fall in love with!',
+          text: 'Lord of The Rings, is with no absolute hesitation, my most favored and adored book by‑far. The triology is wonderful‑ and I really consider this a legendary fantasy series. It will always keep you at the edge of your seat‑ and the characters you will grow and fall in love with!',
         },
       ])
     )

examples/with-react-jss/pages/_document.js

@@ -8,11 +8,12 @@ export default class JssDocument extends Document {
     const originalRenderPage = ctx.renderPage
     ctx.renderPage = () =>
       originalRenderPage({
-        enhanceApp: (App) => (props) => (
-          <JssProvider registry={registry} generateId={generateId}>
-            <App {...props} />
-          </JssProvider>
-        ),
+        enhanceApp: (App) => (props) =>
+          (
+            <JssProvider registry={registry} generateId={generateId}>
+              <App {...props} />
+            </JssProvider>
+          ),
       })
 
     const initialProps = await Document.getInitialProps(ctx)

examples/with-redis/pages/api/subscribe.js

@@ -16,6 +16,7 @@ export default async function upvote(req, res) {
 }
 
 function validateEmail(email) {
-  const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  const re =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
   return re.test(String(email).toLowerCase())
 }

examples/with-redux-toolkit-typescript/src/app/hooks.ts

@@ -4,26 +4,27 @@ import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
 
 import type { AppDispatch, AppState } from './store'
 
-export const useForm = <TContent>(defaultValues: TContent) => (
-  handler: (content: TContent) => void
-) => async (event: ChangeEvent<HTMLFormElement>) => {
-  event.preventDefault()
-  event.persist()
+export const useForm =
+  <TContent>(defaultValues: TContent) =>
+  (handler: (content: TContent) => void) =>
+  async (event: ChangeEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    event.persist()
 
-  const form = event.target as HTMLFormElement
-  const elements = Array.from(form.elements) as HTMLInputElement[]
-  const data = elements
-    .filter((element) => element.hasAttribute('name'))
-    .reduce(
-      (object, element) => ({
-        ...object,
-        [`${element.getAttribute('name')}`]: element.value,
-      }),
-      defaultValues
-    )
-  await handler(data)
-  form.reset()
-}
+    const form = event.target as HTMLFormElement
+    const elements = Array.from(form.elements) as HTMLInputElement[]
+    const data = elements
+      .filter((element) => element.hasAttribute('name'))
+      .reduce(
+        (object, element) => ({
+          ...object,
+          [`${element.getAttribute('name')}`]: element.value,
+        }),
+        defaultValues
+      )
+    await handler(data)
+    form.reset()
+  }
 
 // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 export const useInterval = (callback: Function, delay: number) => {

examples/with-redux-toolkit-typescript/src/features/counter/counterSlice.ts

@@ -70,14 +70,13 @@ export const selectCount = (state: AppState) => state.counter.value
 
 // We can also write thunks by hand, which may contain both sync and async logic.
 // Here's an example of conditionally dispatching actions based on current state.
-export const incrementIfOdd = (amount: number): AppThunk => (
-  dispatch,
-  getState
-) => {
-  const currentValue = selectCount(getState())
-  if (currentValue % 2 === 1) {
-    dispatch(incrementByAmount(amount))
+export const incrementIfOdd =
+  (amount: number): AppThunk =>
+  (dispatch, getState) => {
+    const currentValue = selectCount(getState())
+    if (currentValue % 2 === 1) {
+      dispatch(incrementByAmount(amount))
+    }
   }
-}
 
 export default counterSlice.reducer

examples/with-reflexjs/src/theme.ts

@@ -19,8 +19,7 @@ const theme: Theme = {
   },
   breakpoints: ['640px', '768px', '1024px', '1280px'],
   fonts: {
-    body:
-      '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji',
+    body: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji',
     heading: 'inherit',
     monospace:
       'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',

examples/with-stitches/pages/index.jsx

@@ -21,13 +21,13 @@ const Container = styled('div', {
 
   variants: {
     size: {
-      '1': {
+      1: {
         maxWidth: '300px',
       },
-      '2': {
+      2: {
         maxWidth: '585px',
       },
-      '3': {
+      3: {
         maxWidth: '865px',
       },
     },

examples/with-stripe-typescript/pages/api/checkout_sessions/[id].ts

@@ -15,10 +15,10 @@ export default async function handler(
     if (!id.startsWith('cs_')) {
       throw Error('Incorrect CheckoutSession ID.')
     }
-    const checkout_session: Stripe.Checkout.Session = await stripe.checkout.sessions.retrieve(
-      id,
-      { expand: ['payment_intent'] }
-    )
+    const checkout_session: Stripe.Checkout.Session =
+      await stripe.checkout.sessions.retrieve(id, {
+        expand: ['payment_intent'],
+      })
 
     res.status(200).json(checkout_session)
   } catch (err) {

examples/with-stripe-typescript/pages/api/checkout_sessions/cart.ts

@@ -38,9 +38,8 @@ export default async function handler(
         success_url: `${req.headers.origin}/result?session_id={CHECKOUT_SESSION_ID}`,
         cancel_url: `${req.headers.origin}/use-shopping-cart`,
       }
-      const checkoutSession: Stripe.Checkout.Session = await stripe.checkout.sessions.create(
-        params
-      )
+      const checkoutSession: Stripe.Checkout.Session =
+        await stripe.checkout.sessions.create(params)
 
       res.status(200).json(checkoutSession)
     } catch (err) {

examples/with-stripe-typescript/pages/api/checkout_sessions/index.ts

@@ -35,9 +35,8 @@ export default async function handler(
         success_url: `${req.headers.origin}/result?session_id={CHECKOUT_SESSION_ID}`,
         cancel_url: `${req.headers.origin}/donate-with-checkout`,
       }
-      const checkoutSession: Stripe.Checkout.Session = await stripe.checkout.sessions.create(
-        params
-      )
+      const checkoutSession: Stripe.Checkout.Session =
+        await stripe.checkout.sessions.create(params)
 
       res.status(200).json(checkoutSession)
     } catch (err) {

examples/with-stripe-typescript/pages/api/payment_intents/index.ts

@@ -27,9 +27,8 @@ export default async function handler(
         currency: CURRENCY,
         description: process.env.STRIPE_PAYMENT_DESCRIPTION ?? '',
       }
-      const payment_intent: Stripe.PaymentIntent = await stripe.paymentIntents.create(
-        params
-      )
+      const payment_intent: Stripe.PaymentIntent =
+        await stripe.paymentIntents.create(params)
 
       res.status(200).json(payment_intent)
     } catch (err) {

examples/with-styled-components-rtl/pages/_document.js

@@ -6,12 +6,13 @@ export default class MyDocument extends Document {
   static getInitialProps({ renderPage }) {
     const sheet = new ServerStyleSheet()
 
-    const page = renderPage((App) => (props) =>
-      sheet.collectStyles(
-        <StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
-          <App {...props} />
-        </StyleSheetManager>
-      )
+    const page = renderPage(
+      (App) => (props) =>
+        sheet.collectStyles(
+          <StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
+            <App {...props} />
+          </StyleSheetManager>
+        )
     )
 
     const styleTags = sheet.getStyleElement()

examples/with-styletron/pages/_document.js

@@ -6,11 +6,12 @@ class MyDocument extends Document {
   static async getInitialProps(context) {
     const renderPage = () =>
       context.renderPage({
-        enhanceApp: (App) => (props) => (
-          <StyletronProvider value={styletron}>
-            <App {...props} />
-          </StyletronProvider>
-        ),
+        enhanceApp: (App) => (props) =>
+          (
+            <StyletronProvider value={styletron}>
+              <App {...props} />
+            </StyletronProvider>
+          ),
       })
 
     const initialProps = await Document.getInitialProps({

examples/with-supertokens/pages/api/user.js

@@ -15,8 +15,7 @@ export default async function user(req, res) {
   )
 
   return res.json({
-    note:
-      'Fetch any data from your application for authenticated user after using verifySession middleware',
+    note: 'Fetch any data from your application for authenticated user after using verifySession middleware',
     userId: req.session.getUserId(),
     sessionHandle: req.session.getHandle(),
     userDataInJWT: req.session.getJWTPayload(),

examples/with-three-js/components/Bird.js

@@ -6,11 +6,10 @@ export default function Bird({ speed, factor, url, ...props }) {
   const { nodes, animations } = useGLTF(url)
   const { ref, mixer } = useAnimations(animations)
 
-  useEffect(() => void mixer.clipAction(animations[0], ref.current).play(), [
-    mixer,
-    animations,
-    ref,
-  ])
+  useEffect(
+    () => void mixer.clipAction(animations[0], ref.current).play(),
+    [mixer, animations, ref]
+  )
 
   useFrame((state, delta) => {
     ref.current.rotation.y +=

package.json

@@ -42,10 +42,10 @@
   },
   "pre-commit": "lint-staged",
   "devDependencies": {
-    "@babel/eslint-parser": "7.14.7",
-    "@babel/plugin-proposal-object-rest-spread": "7.12.1",
-    "@babel/preset-flow": "7.12.1",
-    "@babel/preset-react": "7.12.10",
+    "@babel/eslint-parser": "7.15.0",
+    "@babel/plugin-proposal-object-rest-spread": "7.14.7",
+    "@babel/preset-flow": "7.14.5",
+    "@babel/preset-react": "7.14.5",
     "@fullhuman/postcss-purgecss": "1.3.0",
     "@mdx-js/loader": "0.18.0",
     "@svgr/webpack": "5.5.0",
@@ -57,8 +57,8 @@
     "@types/jest": "24.0.13",
     "@types/sharp": "0.28.4",
     "@types/string-hash": "1.1.1",
-    "@typescript-eslint/eslint-plugin": "4.22.0",
-    "@typescript-eslint/parser": "4.22.0",
+    "@typescript-eslint/eslint-plugin": "4.29.1",
+    "@typescript-eslint/parser": "4.29.1",
     "@vercel/fetch": "6.1.1",
     "@zeit/next-css": "1.0.2-canary.2",
     "@zeit/next-sass": "1.0.2-canary.2",
@@ -117,7 +117,7 @@
     "postcss-short-size": "4.0.0",
     "postcss-trolling": "0.1.7",
     "pre-commit": "1.2.2",
-    "prettier": "2.0.5",
+    "prettier": "2.3.2",
     "pretty-bytes": "5.3.0",
     "pretty-ms": "7.0.0",
     "react": "17.0.2",

packages/create-next-app/helpers/validate-pkg.ts

@@ -1,9 +1,10 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import validateProjectName from 'validate-npm-package-name'
 
-export function validateNpmName(
-  name: string
-): { valid: boolean; problems?: string[] } {
+export function validateNpmName(name: string): {
+  valid: boolean
+  problems?: string[]
+} {
   const nameValidation = validateProjectName(name)
   if (nameValidation.validForNewPackages) {
     return { valid: true }