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

[Vadorequest]

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 #11230 (comment)

[tphan18]

I got the same issue when upgrade next, react, and react-dom to latest

Error: /app/components/AppNav.js: transform-react-jsx: pragma has been set but pragmaFrag has not been set

I did use react fragment shorthand syntax in AppNav.js

Everything works great with

    "next": "^9.2.2",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",

[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.

[howks]

The same issue when upgrade:
next from 9.3.0 to 9.3.1
react from 16.13.0 to 16.13.1

[Vadorequest]

Thanks for the workaround @kretzm, I've updated the main post to highlight your solution. Great to know it's related to Fragments, I hadn't figured that out! 💯

[itsmylife]

I have the same issue. To reproduce the problem you can checkout this repo that I created.

https://github.com/itsmylife/nextjs-pragmafrag-error

My workaround is this:

Install @babel/plugin-transform-react-jsx as development dependency.

yarn add -D @babel/plugin-transform-react-jsx

Then, create a .babelrc file in the root of the project.
Inside .babelrc put the following:

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragmaFrag": "React.Fragment"
      }
    ]
  ]
}

And with those you can keep using shorthand React.Fragment. But I think we should not have to do those.

Edit:
I think that is related to new version of @babel/plugin-transform-react-jsx
https://www.npmjs.com/package/@babel/plugin-transform-react-jsx It was published 4 hours ago.

[martpie]

I think this is might be related to all the Babel mess right now:

• Create react app is broken because of 7.9.0 babel/babel#11292
• Build fails: Could not find plugin "proposal-numeric-separator" facebook/create-react-app#8680

[hzoo]

We're looking into this now (Babel team)

Workaround #11230 (comment) as per setting pragmaFlag should work.

[existentialism]

FWIW this particular issue doesn't seem related to the "mess".

[devniel]

I got the same issue while trying the static blog example. npm init next-app --example blog-starter myblog.

[nicolo-ribaudo]

We need help debugging this issue: did you have a /* @jsxFrag React.Fragment */ comment in your code?

We have found a regression that is only triggered when /* @jsxFrag React.Fragment */ is set, but I don't see it neither in the OP neither in the repo posted by @itsmylife.

[nicolo-ribaudo]

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

[sqal]

I ran into the same error after updating @babel/preset-react to 7.9.0 and below comment helped me fix this issue temporarily

#11230 (comment)

[Vadorequest]

@nicolo-ribaudo I can confirm that I don't use /* @jsxFrag React.Fragment */ in my project.
Also, it's OSS so source code can be checked out at UnlyEd/next-right-now-admin#29 (even though I don't think you need to)

[existentialism]

Sorry for the trouble yall, that was a fun debug session with the team :P

[philgruneich]

Gotta love when the bug is so fresh you can't even google for it!

[itsmylife]

We need help debugging this issue: did you have a /* @jsxFrag React.Fragment */ comment in your code?

We have found a regression that is only triggered when /* @jsxFrag React.Fragment */ is set, but I don't see it neither in the OP neither in the repo posted by @itsmylife.

Sorry Nicolo that I couldn't reply in time but I am happy that you guys identified the bug. We are looking for the new release :)

[nicolo-ribaudo]

This should be fixed in @babel/preset-react and @babel/plugin-trasnform-react-jsx 7.9.1: https://github.com/babel/babel/releases/tag/v7.9.1, please test it 🙏

[martpie]

It works! Thank you very much!

[Vadorequest]

I can confirm it works for us too!
I'm closing this issue since it's been resolved, thanks for the quick reaction.

I'd love to know what actually happened, and how we could avoid this in the future. I thought yarn.lock file was supposed to protect against such things.

[nicolo-ribaudo]

I thought yarn.lock file was supposed to protect against such things.

Yes, it should. New projects don't have a lockfile yet so they got the broken version, but I'm not sure how existing projects could have stopped working.

Btw, we'll look into adding an e2e test for Babel with next.js!

[datrine]

I have the same issue. To reproduce the problem you can checkout this repo that I created.

https://github.com/itsmylife/nextjs-pragmafrag-error

My workaround is this:

Install @babel/plugin-transform-react-jsx as development dependency.

yarn add -D @babel/plugin-transform-react-jsx

Then, create a .babelrc file in the root of the project.
Inside .babelrc put the following:

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragmaFrag": "React.Fragment"
      }
    ]
  ]
}

And with those you can keep using shorthand React.Fragment. But I think we should not have to do those.

Edit:
I think that is related to new version of @babel/plugin-transform-react-jsx
https://www.npmjs.com/package/@babel/plugin-transform-react-jsx It was published 4 hours ago.

Thanks for the help. It worked for me.

[itsmylife]

This should be fixed in @babel/preset-react and @babel/plugin-trasnform-react-jsx 7.9.1: https://github.com/babel/babel/releases/tag/v7.9.1, please test it 🙏

Thanks for quick action. We are all appreciated.

[developerJuiceLozzoc]

@Vadorequest Solved my problem with /* @jsxFrag React.Fragment */
in my top level in index.js i have

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

in my component file i have these

/** @jsx jsx */
/* @jsxFrag React.Fragment */
import * as React from "react";
import {useState} from 'react';
import { css, jsx } from '@emotion/core';
import {Link} from "react-router-dom";

i get the error react is defined but never used but it compiles fine with no errors. hope that helps

[eric-burel]

Using Next 10.0.2 and @babel/plugin-transform-react-jsx v7.10+, I seem to have the same issue again. I am in the context of building MDX content. Proposed fixes do not seem to work... It may be related to a weird ReferenceError preceding the rest of the build.

Error:

ReferenceError: React is not defined
    at VNApp (webpack-internal:///./src/pages/_app.tsx:59:3)
    at processChild (/code/vulcan-next-starter/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/code/vulcan-next-starter/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/code/vulcan-next-starter/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/code/vulcan-next-starter/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/code/vulcan-next-starter/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at renderPage (/code/vulcan-next-starter/node_modules/next/dist/next-server/server/render.js:52:851)
    at Object.ctx.renderPage (webpack-internal:///./src/pages/_document.tsx:108:28)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:141:19)
    at Function.MyDocument.getInitialProps (webpack-internal:///./src/pages/_document.tsx:118:85)

SyntaxError: /code/vulcan-next-starter/README.md: pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | 
    | ^
  2 | import React from 'react'
  3 | import { mdx } from '@mdx-js/react'
  4 | 

Yarn why result:

yarn why @babel/plugin-transform-react-jsx
yarn why v1.22.5
[1/4] Why do we have the module "@babel/plugin-transform-react-jsx"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "@babel/plugin-transform-react-jsx@7.10.4"
info Has been hoisted to "@babel/plugin-transform-react-jsx"
info Reasons this module exists
   - Hoisted from "@cypress#code-coverage#@cypress#browserify-preprocessor#@babel#preset-react#@babel#plugin-transform-react-jsx"
   - Hoisted from "@storybook#react#@svgr#webpack#@babel#preset-react#@babel#plugin-transform-react-jsx"
   - Hoisted from "jest-transformer-mdx#babel-preset-react-app#@babel#preset-react#@babel#plugin-transform-react-jsx"
info Disk size without dependencies: "1.1MB"
info Disk size with unique dependencies: "2.34MB"
info Disk size with transitive dependencies: "8.4MB"
info Number of shared dependencies: 10
=> Found "@storybook/addon-docs#@babel/plugin-transform-react-jsx@7.12.5"
info This module exists because "@storybook#addon-docs" depends on it.
info Disk size without dependencies: "428KB"
info Disk size with unique dependencies: "1.66MB"
info Disk size with transitive dependencies: "7.71MB"
info Number of shared dependencies: 10
=> Found "@babel/preset-react#@babel/plugin-transform-react-jsx@7.12.5"
info This module exists because "@babel#preset-react" depends on it.
info Disk size without dependencies: "428KB"
info Disk size with unique dependencies: "1.66MB"
info Disk size with transitive dependencies: "7.71MB"
info Number of shared dependencies: 10
Done in 1.26s.

Edit: related to #18461

[nicolo-ribaudo]

Can you try with Babel 7.12?

[eric-burel]

@nicolo-ribaudo I've managed to fix eventually by rollbacking to classic runtime, my issue was actually slightly different (had pragma set with automatic runtime).

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.