Babel generating broken code when exporting react components from .jsx files

[brupelo]

Consider below code:

src/bar.jsx:

import React from "react";

export default function Bar() {
  return (
    <>
      <span>Bar</span>
    </>
  );
}

src/baz.jsx:

import React from "react";

export default function Baz() {
  return (
    <>
      <span>Baz</span>
    </>
  );
}

src/foo.jsx:

import React from "react";

export default function Foo() {
  return (
    <>
      <span>Foo</span>
    </>
  );
}

src/index.js:

export { default as Foo } from "./foo.jsx";
export { default as Bar } from "./bar.jsx";
export { default as Baz } from "./baz.jsx";

.babelrc:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        ["@babel/transform-runtime"]
    ],
    "ignore": [
        "**/*.stories.js"
    ]
}

package.json:

{
  "devDependencies": {
    "@babel/cli": "7.19.3",
    "@babel/core": "7.19.3",
    "@babel/eslint-parser": "7.19.1",
    "@babel/plugin-transform-runtime": "7.19.1",
    "@babel/polyfill": "7.12.1",
    "@babel/preset-env": "7.19.4",
    "@babel/preset-react": "7.18.6",
    "@babel/register": "7.18.9",
    "eslint": "^8.25.0",
    "eslint-plugin-react": "^7.31.10",
    "prettier": "^2.7.1"
  },
  "engines": {
    "node": "17.8.0 || 18.11.0",
    "npm": "8.5.5 || 8.19.2"
  },
  "main": "./index.js",
  "name": "mcve_babel",
  "peerDependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-router-dom": "6.2.2"
  },
  "scripts": {
    "build": "babel src -d out --delete-dir-on-start --source-maps inline --copy-files --no-copy-ignored"
  },
  "version": "0.0.1"
}

And when i try to run npm run build I'll get

dist/index.js:

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "Bar", {
  enumerable: true,
  get: function get() {
    return _bar["default"];
  }
});
Object.defineProperty(exports, "Baz", {
  enumerable: true,
  get: function get() {
    return _baz["default"];
  }
});
Object.defineProperty(exports, "Foo", {
  enumerable: true,
  get: function get() {
    return _foo["default"];
  }
});
var _foo = _interopRequireDefault(require("./foo.jsx"));
var _bar = _interopRequireDefault(require("./bar.jsx"));
var _baz = _interopRequireDefault(require("./baz.jsx"));

The problem here is the dist tree will look like this:

dist/
├── bar.js
├── baz.js
├── foo.js
└── index.js

So If I tried to use this library in a webapp I'd get import errors because the babel generated code is broken (you can see the generated requires are pointing out to unexistent jsx files).

One possible workaround obviously would be by having exports without using extensions in the first place or by not using .jsx files but .js files instace. That said, I'd like to figure whether it's possible to have jsx files in place and still being able to transpile the code using babel without the final dist being broken code.

Am I missing any babel plugin/config?

[JLHwung]

You can try https://github.com/laat/babel-plugin-transform-rename-import and rename the imports from foo.jsx to foo.js.