Next.js: styled-jsx css.resolve errors after upgrading to React 17.0.0/Next 9.5.5

[iprignano]

Bug report

Describe the bug

After upgrading our Next.js application to React 17.0.0 and Next.js 9.5.5, our builds are failing with the following TypeError when parsing styled-jsx's resolve calls:

TypeError: pass.get(...) is not a function

This only seems to happen when resolve is called outside of a jsx/tsx file. You can see a working example here: https://codesandbox.io/s/elegant-bassi-tbx5c?file=/pages/index.tsx (as opposed to the reproduction sandbox below).

I'm struggling to find the cause of these errors, as this pattern is working fine for us on React 16.x and Next.js 9.5.5. Could this be due to the new JSX transform support?

To Reproduce

CodeSandbox reproduction:

https://codesandbox.io/s/nice-bose-85uux?file=/lib/styles.ts

Expected behavior

The build should succeed without errors.

System information

• OS: any
• Version of Next.js: 9.5.5
• Version of Node.js: 10.20.1 / 12.11.1

Additional context

N/A

[KB1RMA]

The error is slightly different in this case, but this is probably related to: https://github.com/vercel/next.js/issues/18083 ? Hard to tell though

[iprignano]

@KB1RMA Not sure – that issue seems to be caused by a corrupted lockfile / cached dependency tree. This one can be reproduced consistently, so I'm inclined to think they're not the same thing. Maybe the underlying dependency change could be somewhat related, but I don't know for sure. Thanks for looking!

[trekinbami]

Don't know if I'm much help, but I'm getting the same error after I installed babel-plugin-inline-react-svg.

This breaks (pass.get(...) is not a function):

import ArrowRightIcon from '../../assets/icons/arrow_right.svg';
export { ArrowRightIcon };

While this works:

import ArrowRightIcon from '../../assets/icons/arrow_right.svg';
export const ArrowRight = <ArrowRightIcon />;

[optimistiks]

I have the same issue when building an app, using NextJS v10 and React v17. Everything works fine on NextJS v10 and React v16 though.

[brianshano]

Same for me, upgrading to nextJS 10 and React 17.
Also using babel-plugin-inline-react-svg.
file with export { default as IconPlay } from "./play.svg"; failed.

Removing this worked