Next.js: css.resolve error in react17

[gtolarc]

The following error seems to occur when using the css.resolve function from react17. Does anyone have the same issue?

[timneutkens]

Can you try next@canary (if you're using Next.js) as we've updated the React peerdependencies.

[gtolarc]

The same problem occurs in the next@canary version.

Is it related to this part?
https://reactjs.org/blog/2020/10/20/react-v17.html#new-jsx-transform

I heard that react17 has no problem with the existing compatibility, and this problem occurs after just upgrading react without changing other parts.

[Arjan-Zuidema]

Having the same issue here with css.resolve. Using next@canary did not resolve the issue. So we cannot upgrade to React 17 at this point.

[dennismorello]

I have the same issue (React 17 and Next.js 10) 😢

[giuseppeg]

@gtolarc does this happen in Next.js with React 16? Can you create a testcase in codesandbox https://csb.new

[Arjan-Zuidema]

@giuseppeg It only happens in React 17, not in React 16, for me

[giuseppeg]

Alright folks, please help me reproduce. You can fork this and break it https://codesandbox.io/s/serene-albattani-s966n?file=/pages/index.js

[Arjan-Zuidema]

This fork breaks: https://codesandbox.io/s/frosty-galois-5jzuj?file=/pages/index.js
The only thing I changed was to load the style from a file, not in the page itself

[giuseppeg]

It seems to be an issue with the new JSX transform

Stacktrace

"ModuleBuildError: Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
TypeError: ~/test-next/style.js: pass.get(...) is not a function
    at Object.post (~/test-next/node_modules/@babel/plugin-transform-react-jsx-development/lib/index.js:38:76)
    at buildJSXElementCall (~/test-next/node_modules/@babel/helper-builder-react-jsx-experimental/lib/index.js:481:15)
    at PluginPass.exit (~/test-next/node_modules/@babel/helper-builder-react-jsx-experimental/lib/index.js:80:22)
    at newFn (~/test-next/node_modules/@babel/traverse/lib/visitors.js:175:21)
    at NodePath._call (~/test-next/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (~/test-next/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (~/test-next/node_modules/@babel/traverse/lib/path/context.js:101:8)
    at TraversalContext.visitQueue (~/test-next/node_modules/@babel/traverse/lib/context.js:116:16)
    at TraversalContext.visitSingle (~/test-next/node_modules/@babel/traverse/lib/context.js:88:19)
    at TraversalContext.visit (~/test-next/node_modules/@babel/traverse/lib/context.js:144:19)
    at ~/test-next/node_modules/webpack/lib/NormalModule.js:316:20
    at ~/test-next/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at ~/test-next/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (~/test-next/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at ~/test-next/node_modules/next/dist/compiled/babel-loader/index.js:1:6042
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)"

debug

I will need to find some time to debug this issue.

If anybody wants to help out that'd be great! The first thing I'd try is to upgrade Babel in styled-jsx.

Support for the new JSX transform is available in Babel v7.9.0 and above.

If that doesn't fix it, install the plugins https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#manual-babel-setup and write a test in this file, with a custom Babel configuration

https://github.com/vercel/styled-jsx/blob/28d2d8f2294496fd0ee387019aae19b2d37f01c8/test/external.js#L97-L112

temporary workaround

If you have just a handful of files a temporary workaround is to add some jsx in those files eg:

const fix = () => <span />;

[iprignano]

Same issue as https://github.com/vercel/next.js/issues/18134

[Timer]

Duplicate of #18134