next.js: Upgrading to Next.js 10 and React 17 - Webpack build fails with `pragma has been set but pragmaFrag has not been set`

Bug report

Describe the bug

error - ./src/components/errors/ErrorDebug.tsx
Error: /Users/vadorequest/dev/next-right-now/src/components/errors/ErrorDebug.tsx: transform-react-jsx: pragma has been set but pragmaFrag has not been set
Error: Cannot find module '/Users/vadorequest/dev/next-right-now/.next/server/pages-manifest.json'
Require stack:
- /Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/require.js
- /Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/load-components.js
- /Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/api-utils.js
- /Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/next-server.js
- /Users/vadorequest/dev/next-right-now/node_modules/next/dist/server/next.js
- /Users/vadorequest/dev/next-right-now/node_modules/next/dist/server/lib/start-server.js
- /Users/vadorequest/dev/next-right-now/node_modules/next/dist/cli/next-dev.js
- /Users/vadorequest/dev/next-right-now/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1029:15)
    at Function.Module._load (internal/modules/cjs/loader.js:898:27)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at getPagePath (/Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/require.js:1:657)
    at requirePage (/Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/require.js:1:1062)
    at loadComponents (/Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/load-components.js:1:807)
    at DevServer.findPageComponents (/Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/next-server.js:71:296)
    at DevServer.renderErrorToHTML (/Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/next-server.js:127:120)
    at DevServer.renderErrorToHTML (/Users/vadorequest/dev/next-right-now/node_modules/next/dist/server/next-dev-server.js:34:974) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/require.js',
    '/Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/load-components.js',
    '/Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/api-utils.js',
    '/Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/vadorequest/dev/next-right-now/node_modules/next/dist/server/next.js',
    '/Users/vadorequest/dev/next-right-now/node_modules/next/dist/server/lib/start-server.js',
    '/Users/vadorequest/dev/next-right-now/node_modules/next/dist/cli/next-dev.js',
    '/Users/vadorequest/dev/next-right-now/node_modules/next/dist/bin/next'
  ]

Related to:

The issue isn’t related with Next.js 10 directly, but between Babel, React 17 and Emotion.

To Reproduce

Clone this branch:

a7cb72f (#189)

Run yarn start

Additional context

I’m not sure if Next.js can do anything about this, it probably can’t. I wonder if upgrading to Next.js 10 while staying on React 16 is an advised workaround until the issue is fixed.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 21 (20 by maintainers)

Commits related to this issue

Remove usage of JSX pragma (/** @jsx jsx */) + add babel support for the Emotion "css" props (@emotion/babel-preset-css-prop) - See https://github.com/vercel/next.js/issues/18461#issuecomment-71878835... — committed to UnlyEd/next-right-now by Vadorequest 4 years ago
Upgrade `v2-mst-aptd-at-lcz-sty` preset to Next.js 10 (#189) * Upgrade Next 9 > 10 + React 16.13.1 > 17.0.1 * Mis doc revalidate in preview mode * Fix TS type StaticPathsOutput "fallback" optio... — committed to UnlyEd/next-right-now by Vadorequest 4 years ago
Remove usage of JSX pragma (/** @jsx jsx */) + add babel support for the Emotion "css" props (@emotion/babel-preset-css-prop) - See https://github.com/vercel/next.js/issues/18461#issuecomment-71878835... — committed to UnlyEd/next-right-now by Vadorequest 4 years ago
Upgrade emotion deps + update babel config so that Emotion uses the newer JSX Runtime - See https://github.com/vercel/next.js/issues/18461#issuecomment-720095483 — committed to UnlyEd/next-right-now by Vadorequest 4 years ago
Upgrade to latest react/nextjs Upgraded to the latest react and nextjs versions. This required a fix for using @emotion/core `/** @jsx jsx */` utility. See more here: https://github.com/vercel/next.j... — committed to jonleopard/jonleopard.com by jonleopard 4 years ago

Most upvoted comments

Next.js 10 + React 17 + Emotion doesn’t need the JSX pragma comment.

Try this technique in the new example with the Babel CSS preset (just merged today):

https://github.com/vercel/next.js/tree/canary/examples/with-emotion

I just recently did this in a project:

Add Emotion to Next.js 10: https://github.com/upleveled/next-js-example-sep-2020/commit/363f56fff058b81003e61d6836f5e6836d82dc7a
Upgrade to React 17: https://github.com/upleveled/next-js-example-sep-2020/commit/6e9a42316f8646ce89a084ab5d1ab4a143e58451

Some gotchas:

Remove all of the /** @jsx jsx */ and /** @jsxFrag React.Fragment */ pragma comments
I had to use <React.Fragment> instead of <> (seems to be an issue with Emotion’s CSS Babel preset, see https://github.com/emotion-js/emotion/issues/1303)

karlhorky on Oct 29, 2020

@Vadorequest new version is out! No need to import React anymore!!

Example upgrade here: https://github.com/upleveled/next-js-example-sep-2020/commit/f46407e345d3a00e99066d0276acb768f11ad02e

karlhorky on Nov 1, 2020

Edit: This is outdated. Check the latest configuration here: https://github.com/vercel/next.js/issues/18096#issuecomment-729868888

~~Looks like the new version of @emotion/core and @emotion/babel-preset-css-prop (>=10.1.0) will allow opting into the new JSX runtimes by using such configuration:~~

.babelrc

{
  "presets": [["@emotion/babel-preset-css-prop", { "runtime": "automatic" }]]
}

Reference: https://github.com/emotion-js/emotion/pull/2063

karlhorky on Nov 24, 2020

Looks like the new version of @emotion/core and @emotion/babel-preset-css-prop (>=10.1.0) will allow opting into the new JSX runtimes by using such configuration:

.babelrc
{
  "presets": [["@emotion/babel-preset-css-prop", { "runtime": "automatic" }]]
}
Reference: emotion-js/emotion#2063

Error: [BABEL] **...**-mdx/pages/_app.js: The `runtime` option has been removed. If you want to configure `runtime: "automatic"`, replace `@emotion/babel-preset-css-prop` with `@babel/preset-react` and `@emotion/babel-plugin`. You can find out how to configure things properly here: https://emotion.sh/docs/css-prop#babel-preset (While processing: "**...**-mdx/node_modules/@emotion/babel-preset-css-prop/dist/emotion-babel-preset-css-prop.cjs.js")

now, it’s not.

sgmheyhey on Nov 24, 2020

@Vadorequest can you please reopen until we have a more robust fix? Experiencing this as well with MDX content and I can’t find a solution yet.

Edit: actually my message is slightly different: pragma and pragmaFrag cannot be set when runtime is automatic, sorry for the confusion.

Edit 2: the quickfix is to add following config in babel.config.js:

module.exports = {
  // we also need next/babel preset to work with Next
  presets: [
    [
      "next/babel",
      {
        "preset-react": {
          runtime: "classic",
        },
      },
    ],
  ],
};

It temporarily goes back to preexisting behaviour and it should probably be recommended until 3rd party lib update to those new runtime.

eric-burel on Nov 20, 2020

Mostly right, although the requirement to import React has also been removed in other pre-17 versions:

React 16.14.0
React 15.7.0
React 0.14.10

Here’s a blog post about the new JSX transform: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

karlhorky on Oct 29, 2020

Thank you @karlhorky very much!

Following your advices worked fine, see a9df25e (#189)

I also had to add a babel.config.js file and install @emotion/babel-preset-css-prop, or it would compile successfully, but all CSS would break. Your code examples were very useful!

Vadorequest on Oct 29, 2020