RollupJS: [Component] — неопределенная ошибка в компонентах jsx/tsx

Question

У меня есть простой проект react + typescript, который наполовину машинописный, другой написан на commonJS, который использует накопительный пакет для объединения. Мой файл rollup.config выглядит следующим образом:

      import resolve from '@rollup/plugin-node-resolve'
import babel from '@rollup/plugin-babel'
import postcss from 'rollup-plugin-postcss'
import typescript from '@rollup/plugin-typescript'
import commonjs from '@rollup/plugin-commonjs'

export default {
    input: 'src/index.js',
    output: {
        file: 'lib/bundle.js',
        format: 'umd',
        name: '[name]',
    },
    plugins: [
        resolve(),
        postcss({ plugins: [], writeDefinitions: true, modules: true }),
        typescript({ outputToFilesystem: true, jsx: 'preserve' }),
        babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' }),
        commonjs(),
    ],
    external: [
        'react',
        'react-sizeme',
        'lodash',
    ],
}

Все работало нормально, пока я не решил добавить несколько компонентов. Я начал получать ошибку плагина после использования jsx/tsx. Я узнал, что @rollup/plugin-typescriptздесь нельзя зарезервировать jsx/ tsx . Я обновил свой конфиг и добавил плагин.

      import resolve from '@rollup/plugin-node-resolve'
    import babel from '@rollup/plugin-babel'
    import postcss from 'rollup-plugin-postcss'
    import typescript from '@rollup/plugin-typescript'
    import commonjs from '@rollup/plugin-commonjs'
    import jsx from 'acorn-jsx'

    export default {
        input: 'src/index.js',
        output: {
            file: 'lib/bundle.js',
            format: 'umd',
            name: '[name]',
        },
        acornInjectPlugins: [jsx()],
        plugins: [
            resolve(),
            postcss({ plugins: [], writeDefinitions: true, modules: true }),
            typescript({ outputToFilesystem: true, jsx: 'preserve' }),
            babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' }),
            commonjs(),
        ],
        external: [
            'react',
            'react-sizeme',
            'lodash',
        ],
    }

Хотя это устранило ошибку, моя окончательная сборка не включает импортированные компоненты jsxt/tsx. пример

      const ExternalComp: React.FC<{ name: string }> = ({ name: string }) => React.reactElement<void> => {
    return (<div> I am external {name}</div>
}

const MyFunction: React.FC<{ name: string }> = ({ name: string}) => React.reactElement<void> => {
  return(
    <ExternalComp name={name} />
  )
}

Когда я связываю свою сборку выше, кажется, что она все время опускается и все время выдает ошибку undefined в моем приложении. acorn-jsxкажется, что компоненты, не входящие в основной компонент, не включены в окончательный комплект/сборку. Пожалуйста, с чем это связано и как с этим бороться? Любая помощь будет оценена.

Обновлять

Добавление console.log([ExternalComp])внутри MyFunctionпринудительно связывает RollUp с ExternalComp. Просто рендеринг <ExternalComp />нет.