Skip to content

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

@Skn0tt

Description

@Skn0tt

Bug Report

I'm currently investigating blitz-js/babel-plugin-superjson-next#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: blitz-js/babel-plugin-superjson-next#29 (comment)

  • 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:

const node = t.callExpression(get(pass, `id/${name}`)(), args);

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

define("id/jsxs", development ? "jsxDEV" : "jsxs");

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 ☺️

Metadata

Metadata

Assignees

No one assigned

    Labels

    i: regressionoutdatedA closed issue/PR that is archived due to age. Recommended to make a new issuepkg: traverse

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions