I am building a component library ProjectA and ProjectB will use this library. In ProjectA I am using the below tsconfig and build to generate the dist files. However the issue I am seeing is Support for the experimental syntax 'jsx' isn't currently enabled. Normally the fix for this is to update babel to handle these situations. However I am using create-react-app and am unable to edit the .babelrc. Does my yarn build need to be altered to enable this to work?

// ProjectA package.json
"build": "rm -rf dist && npx tsc && NODE_ENV=production babel src/components --out-dir dist/components --extensions '.tsx' --presets @babel/preset-typescript --presets @babel/preset-env --ignore __tests__,__snapshots__,__mocks__,stories.js,**/*.test.tsx",

// Project A tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "rootDirs": [
      "src",
      "stories",
      "config"
    ],
    "rootDir": "src",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react-jsx",
    "declaration": true,
    "emitDeclarationOnly": true,
    // Ensure that Babel can safely transpile files in the TypeScript project
    "isolatedModules": true,
    "outDir": "dist"
  },
  "include": ["src"],
  "exclude": [
    "**/*.spec.ts",
    "**/*.test.tsx",
    "**/*.stories.js",
    "node_modules",
    "src/test-utils",
    "dist",
    "docs",
    "src/setupTests.js"
  ]
}

// Project B package.json

"start": "BROWSER=none react-scripts start",
"build": "react-scripts build",

Built component

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Input = void 0;

var _react = _interopRequireDefault(require("react"));

var _TextField = _interopRequireDefault(require("@mui/material/TextField"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Input = function Input(_ref) {
  var defaultValue = _ref.defaultValue,
      disabled = _ref.disabled,
      id = _ref.id,
      fullWidth = _ref.fullWidth,
      onChange = _ref.onChange,
      readOnly = _ref.readOnly,
      required = _ref.required,
      label = _ref.label,
      type = _ref.type,
      variant = _ref.variant;

  var handleChange = function handleChange(e) {
    onChange(e.target.value);
  };

  return <_TextField.default defaultValue={defaultValue} disabled={disabled} fullWidth={fullWidth} onChange={handleChange} id={id} InputProps={{
    readOnly: readOnly
  }} label={label} required={required} type={type} variant={variant} />;
};

exports.Input = Input;
Input.defaultProp = {
  defaultValue: '',
  disabled: true,
  fullWidth: false,
  readOnly: false,
  required: false,
  type: 'text',
  variant: 'standard'
};
var _default = Input;
exports.default = _default;

Full Error

Failed to compile.

../component-library/dist/components/Input/Input.js
SyntaxError: /var/www/target/component-library/dist/components/Input/Input.js: Support for the experimental syntax 'jsx' isn't currently enabled (30:10):

  28 |   };
  29 |
> 30 |   return <_TextField.default defaultValue={defaultValue} disabled={disabled} fullWidth={fullWidth} onChange={handleChange} id={id} InputProps={{
     |          ^
  31 |     readOnly: readOnly
  32 |   }} label={label} required={required} type={type} variant={variant} />;
  33 | };

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.