"Error: Webpack Compilation Error" with "pragma and pragmaFrag cannot be set when runtime is automatic" false-positive comment

[Vadorequest]

What version of Next.js are you using?

10.0.5

What version of Node.js are you using?

12

What browser are you using?

Chrome

What operating system are you using?

MacOS

How are you deploying your application?

Vercel

Describe the Bug

Running Cypress fails with pragma and pragmaFrag cannot be set when runtime is automatic..

It's related to a recent change in babel.config.js, which now uses preset-react with automatic mode. (added to support Emotion 11)

I'm not sure if it's an issue in Next.js or Cypress itself. It's definitely because I changed the Next.js babel configuration, but the underlying issue might be on Cypress's side.

 Running:  app/_sanity/1-domain.ts                                                         (1 of 5)

Oops...we found an error preparing this test file:

  cypress/support/index.js

The error was:

Error: Webpack Compilation Error
./cypress/support/index.js
Module build failed (from /github/home/.cache/Cypress/6.2.1/Cypress/resources/app/packages/server/node_modules/babel-loader/lib/index.js):
SyntaxError: /__w/next-right-now/next-right-now/cypress/support/index.js: pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | // ***********************************************************
    | ^
  2 | // This example support/index.js is processed and
  3 | // loaded automatically before your test files.
  4 | //

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

Expected Behavior

It should compile, the // *********************************************************** is not a pragma, it's detected as a false-positive pragma.

To Reproduce

PR: UnlyEd/next-right-now#243

Use following babel.config.js:

/**
 * Babel configuration for Next.js
 *
 * The official documentation uses a ".babelrc" file, but we prefer using "babel.config.js" for better documentation support.
 *
 * @see https://nextjs.org/docs/advanced-features/customizing-babel-config Official doc reference v10
 * @see https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts You can take a look at this file to learn about the presets included by next/babel.
 * @see https://emotion.sh/docs/css-prop##babel-preset Configuring Emotion 11
 * @example https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config Next.js official example of customizing Babel
 */
module.exports = {
  presets: [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  plugins: ["@emotion/babel-plugin"],
};

And keep the default Cypress comments, e.g:

// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// See https://dev.to/cuichenli/how-do-i-setup-my-nextjs-development-environment-2kao
import '@cypress/react/support';
import './commands';

// See https://docs.cypress.io/api/events/catalog-of-events.html#Uncaught-Exceptions
Cypress.on('uncaught:exception', (err, runnable) => {
  // returning false here prevents Cypress from
  // failing the test
  console.error('Application error caught:', err, runnable);
  return false;
});

[Vadorequest]

I tried changing the comments from // * to /* but the same error happens.

Oops...we found an error preparing this test file:

  cypress/support/index.js

The error was:

Error: Webpack Compilation Error
./cypress/support/index.js
Module build failed (from /github/home/.cache/Cypress/6.2.1/Cypress/resources/app/packages/server/node_modules/babel-loader/lib/index.js):
SyntaxError: /__w/next-right-now/next-right-now/cypress/support/index.js: pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | /*
    | ^

[Vadorequest]

It looks like my assumption about the interpretation of the top-level file comment was wrong, as removing the comments still leads to the same issue.

Oops...we found an error preparing this test file:

  cypress/support/index.js

The error was:

Error: Webpack Compilation Error
./cypress/support/index.js
Module build failed (from /Users/vadorequest/Library/Caches/Cypress/6.2.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/vadorequest/dev/NRN/v2-mst-aptd-gcms-lcz-sty/cypress/support/index.js: pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | import '@cypress/react/support';
    | ^
  2 | import './commands';
  3 | 
  4 | // This example support/index.js is processed and

I'm not sure what the error is at this point, I don't know why it only affects Cypress and not the whole Next.js build either.

[Vadorequest]

This was a Babel/Webpack/TS configuration issue introduced by changing the babel config required by Emotion 11. It has been explained and fixed at UnlyEd/next-right-now#247

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