preset-react and react-constant-elements produce invalid code with dynamic import

[leodr]

Bug Report

• I would like to work on a fix!

I would work on a fix but unfortunately I have no experience with the Babel repository.

Current behavior

Babel produces invalid code that looks like this:

import React from "react";
import OtherComponent, { var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LazyComponent, null), /*#__PURE__*/React.createElement(OtherComponent, null)); } from "./components/other-component";
export default function App() {
  return _ref;
}
const LazyComponent = /*#__PURE__*/React.lazy(() => import("./components/lazy-component"));

EDIT: Got it reproduced in the REPL aswell now, here is the link.

Here is a GitHub-Repository with a minimal example: https://github.com/leodr/babel-constant-elements-bug

Input Code

import React from "react";
import OtherComponent from "./components/other-component";

export default function App() {
  return (
    <div>
      <LazyComponent />
      <OtherComponent />
    </div>
  );
}

const LazyComponent = React.lazy(() => import("./components/lazy-component"));

Expected behavior

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

• Filename: babel.config.js

module.exports = {
  presets: ["@babel/preset-react"],
  plugins: ["@babel/plugin-transform-react-constant-elements"],
};

Environment

  System:
    OS: Windows 10 10.0.18362
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @babel/cli: ^7.12.1 => 7.12.1
    @babel/core: ^7.12.3 => 7.12.3
    @babel/plugin-transform-react-constant-elements: ^7.12.1 => 7.12.1
    @babel/preset-react: ^7.12.1 => 7.12.1

[babel-bot]

Hey @leodr! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."