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

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

[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 />;

[lucax88x]

@Timer can we reopen this?