@babel/plugin-transform-react-jsx: d(...) is not a function

Bug Report

I’m currently investigating https://github.com/blitz-js/babel-plugin-superjson-next/issues/29. It occurs since Next.js updated @babel/plugin-transform-react-jsx to 7.12.10.

TypeError: /[...]/babel-plugin-superjson-repro/pages/index.js: d(...) is not a function

It’s caused by this code:

export function getServerSideProps() {
  return {
    props: {
      date: new Date(),
    },
  };
}

export default function Home(props) {
  return <div>hello world {props.date instanceof Date ? "true" : "false"}</div>;
}

After being passed through babel-plugin-superjson-next, it looks like this:

import { withSuperJSONPage as _withSuperJSONPage } from 'babel-plugin-superjson-next/tools';
import { withSuperJSONProps as _withSuperJSONProps } from 'babel-plugin-superjson-next/tools';

export const getServerSideProps = _withSuperJSONProps(
  function getServerSideProps() {
    return {
      props: {
         date: new Date(),
      },
    };
  }
);

function Page({ products }) {
  return <div>hello world {props.date instanceof Date ? "true" : "false"}</div>;
}

export default _withSuperJSONPage(Page);

Interestingly, the error does not occur if you move the export default onto it’s own line: https://github.com/blitz-js/babel-plugin-superjson-next/issues/29#issuecomment-760224611

• I would like to work on a fix! (provided you give me a hint in the right direction, and this is indeed a bug on Babel’s side)

Current behavior

Repro: Skn0tt/babel-plugin-superjson-next-10.0.5-repro

(FYI: Since Next bundles Babel, linking a local Babel package for debugging won’t work.)

Expected behavior I expected it not to crash.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

Next.js 10.0.5, babel-plugin-superjson-next.

Environment

• Babel version(s): 7.12.10
• Node/npm version: occurs on multiple versions
• OS: occurs on multiple platforms
• Monorepo: no
• How you are using Babel: webpack / next

Additional context I was able to track the error down to this line:

https://github.com/babel/babel/blob/6e9a174e7f70180a7ae7b7c01a2c988849666cf0/packages/babel-plugin-transform-react-jsx/src/create-plugin.js#L277

In my case, name is "jsxs". So it tries to access id/jsxs from the plugin pass, which should have been defined here:

https://github.com/babel/babel/blob/6e9a174e7f70180a7ae7b7c01a2c988849666cf0/packages/babel-plugin-transform-react-jsx/src/create-plugin.js#L205

Since this is in Program#enter, this should have run before, but it didn’t.

I’m out of ideas and would very much appreciate your thoughts ☺️

[nicolo-ribaudo]

It doesn’t need to wait for a minor/major, but @babel/traverse bugs are so hard to fix that it might take a while.

This might be fixed by https://github.com/babel/babel/pull/12634, which is an old branch I had locally and just pushed.

[JLHwung]

@nicolo-ribaudo

Prettier helps

mv node_modules/next/dist/compiled/babel/bundle.js bundle.js 
npx prettier --write bundle.js 
mv bundle.js node_modules/next/dist/compiled/babel/bundle.js