Compilation error - transform-react-jsx: pragma has been set but pragmaFrag has not been set

Bug report

Describe the bug

My build on Zeit is erroring with the following stack trace:

17:35:38.096
Creating an optimized production build...
17:35:38.601
[webpack] Building release "1.0.0-beta.1_zBuNtNkFEHR1aBTmOhBpQ"
17:35:55.427
Failed to compile.
17:35:55.428
./src/pages/_error.tsx
17:35:55.428
Error: /zeit/198ac8ea/src/pages/_error.tsx: transform-react-jsx: pragma has been set but pragmaFrag has not been set
17:35:55.428
> Build error occurred
17:35:55.429
Error: > Build failed because of webpack errors
17:35:55.429
    at build (/zeit/198ac8ea/node_modules/next/dist/build/index.js:10:900)
17:35:55.466
error Command failed with exit code 1.
17:35:55.466
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
17:35:55.476
Error: Error: Exited with 1
17:35:55.477
    at ChildProcess.<anonymous> (/zeit/2b7c515595ce4419/.build-utils/node_modules/@now/build-utils/dist/index.js:31347:24)
17:35:55.477
    at ChildProcess.emit (events.js:223:5)
17:35:55.477
    at ChildProcess.EventEmitter.emit (domain.js:475:20)
17:35:55.477
    at maybeClose (internal/child_process.js:1021:16)
17:35:55.477
    at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
17:35:55.842
worker exited with code 20 and signal null
17:35:57.147
Done with "package.json"

I can’t explain it, I haven’t changed anything related to node modules. Here is the source code of pages/_error.tsx:

import * as Sentry from '@sentry/node';
import { NextPageContext } from 'next';
import Error, { ErrorProps as NextErrorProps } from 'next/error';
import React from 'react';

// XXX See https://github.com/zeit/next.js/blob/canary/examples/with-sentry-simple/pages/_error.js
const NRNError = (props: NRNErrorProps): JSX.Element => {
  const { statusCode, isSSRReadyToRender, err, children = null } = props;

  if (!isSSRReadyToRender && err) {
    // getInitialProps is not called in case of
    // https://github.com/zeit/next.js/issues/8592. As a workaround, we pass
    // err via _app.js so it can be captured
    Sentry.captureException(err);
  }

  return (
    <>
      {
        // Render the children if provided, or return the native Error component from Next
        children ? (
          children
        ) : (
          <Error statusCode={statusCode} />
        )
      }
    </>
  );
};

NRNError.getInitialProps = async (props: NextPageContext): Promise<ErrorProps> => {
  const { res, err, asPath } = props;
  // @ts-ignore
  const errorInitialProps: ErrorProps = await Error.getInitialProps({ res, err });

  // Workaround for https://github.com/zeit/next.js/issues/8592, mark when
  // getInitialProps has run
  errorInitialProps.isSSRReadyToRender = true;

  if (res) {
    // Running on the server, the response object is available.
    //
    // Next.js will pass an err on the server if a page's `getInitialProps`
    // threw or returned a Promise that rejected

    if (res.statusCode === 404) {
      // Opinionated: do not record an exception in Sentry for 404
      return { statusCode: 404, isSSRReadyToRender: true };
    }

    if (err) {
      Sentry.captureException(err);

      return errorInitialProps;
    }
  } else {
    // Running on the client (browser).
    //
    // Next.js will provide an err if:
    //
    //  - a page's `getInitialProps` threw or returned a Promise that rejected
    //  - an exception was thrown somewhere in the React lifecycle (render,
    //    componentDidMount, etc) that was caught by Next.js's React Error
    //    Boundary. Read more about what types of exceptions are caught by Error
    //    Boundaries: https://reactjs.org/docs/error-boundaries.html
    if (err) {
      Sentry.captureException(err);

      return errorInitialProps;
    }
  }

  // If this point is reached, getInitialProps was called without any
  // information about what the error might be. This is unexpected and may
  // indicate a bug introduced in Next.js, so record it in Sentry
  Sentry.captureException(
    // @ts-ignore
    new Error(`_error.js getInitialProps missing data at path: ${asPath}`),
  );

  return errorInitialProps;
};

export type NRNErrorProps = {
  err: Error;
  statusCode: number;
  isSSRReadyToRender: boolean;
  children?: React.ReactElement;
}

export type ErrorProps = {
  isSSRReadyToRender: boolean;
} & NextErrorProps;

export default NRNError;

To Reproduce

No idea, everything was working fine until then. Since I didn’t change anything on my side, it may be related to some node module, most potentially with transform-react-jsx babel plugin.

I don’t know what’s causing the issue.

Expected behavior

Should compile.

Workarounds

Use React.Fragment

Using <React.Fragment></React.Fragment> instead of <></> - See https://github.com/zeit/next.js/issues/11230#issuecomment-601816427

[kretzm]

I just ran into the same thing. It looks like there’s a problem rendering shorthand fragments <>..</> from that package.

My temporary fix was to switch it all to <React.Fragment></React.Fragment> and that seems to work right now.

[nicolo-ribaudo]

Ok, we have identified the bug. We will release a fix soon.