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

[Vadorequest]

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:

• https://github.com/babel/babel/issues/12208
• https://github.com/emotion-js/emotion/issues/2041#issuecomment-718245427
• https://github.com/emotion-js/emotion/issues/1969
• https://github.com/emotion-js/emotion/pull/1970

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.

[karlhorky]

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:

1. Remove all of the /** @jsx jsx */ and /** @jsxFrag React.Fragment */ pragma comments
2. 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)

[Vadorequest]

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!

[karlhorky]

Great, glad it worked for you! So can this issue be closed?

[Vadorequest]

I'm doing a bit of trying around, my <> seem to work still and wanna understand why 😄
I'll close it once everything seems alright 😉

[karlhorky]

Oh, that would be great if you could figure that out - would be awesome to avoid having to import Fragment!

Maybe I have to upgrade my transitive Babel dependencies or something...

Edit: Tried deleting my yarn.lock file and running yarn install, but didn't help :(

[Vadorequest]

Well, it definitely seems to work. 6838ed3 (#189)

Got deployed on Vercel successfully: https://nrn-v2-mst-aptd-at-lcz-sty-c1-aydh0quhd.vercel.app/fr/examples/native-features/example-with-ssr

But I have no idea why it'd work on my setup and not on yours though.

[karlhorky]

Ahh, it's because of the missing import at the top of my code. Your code has this line where mine did not:

import React from 'react';

Both React 17 and Next.js no longer require this import, so I didn't have it there.

[karlhorky]

Feel free to close this now @Vadorequest :)

[Vadorequest]

So, you mean there is no point importing import React from 'react'; if not using Fragments (or any React "element") anymore? While it was a requirement before React 17?

[karlhorky]

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]

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]

@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

[Vadorequest]

Thank you @karlhorky, I've upgraded and there doesn't seem to be any issue. https://github.com/UnlyEd/next-right-now/pull/197

Although, I didn't encounter issues before, but that may be because most of my pages import React. 🤔

[Vadorequest]

Well, looks like I spoke too fast! It works fine locally, but fails on Vercel with ReferenceError: _jsx is not defined. https://github.com/UnlyEd/next-right-now/pull/197#issuecomment-720347051

[karlhorky]

Yeah, I ran into something similar (although the error on my side was _jsxs is not defined).

Seems to be an issue with how the Babel presets for Next.js and Emotion play together:

https://github.com/vercel/next.js/issues/18096

There is a stopgap workaround, but I think it's probably better to wait for a proper solution:

https://github.com/emotion-js/emotion/issues/2064#issuecomment-720110955