Проблемы с импортом Recharts в проект Rollup, Typescript, React

Использование Rollup, React и Typescript - все последние версии. Попытка импортировать Recharts в функциональный компонент React. Сборка выполняется нормально, но я получаю сообщение об ошибке браузера (последняя версия Chrome) «Невозможно использовать оператор импорта вне модуля».

Конфигурация сводного пакета выглядит следующим образом:

import typescript from '@rollup/plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from "@rollup/plugin-commonjs";
import dev from 'rollup-plugin-dev';
import copy from 'rollup-plugin-copy';
import replace from '@rollup/plugin-replace';
import json from '@rollup/plugin-json';

// Loaders for other file types
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';

console.log(`Node env is ${process.env.NODE_ENV}`);

let isDevEnv = process.env.NODE_ENV === 'development';  
let useMsw = process.env.USE_MSW;

const extensions = ['.cjs', '.js', '.jsx', '.json', '.ts', '.tsx', '.css', '.png'];

const intro = `global = window; window.NODE_ENV = process.env.NODE_ENV; ${useMsw ? 'window.USE_MSW = true;' : ''}`;
export default {
    input: [
        'src/index.tsx'
    ],
    output: {
        intro: intro,
        file: './dist/bundle.js',
        format: 'es',
        sourcemap: isDevEnv,
        inlineDynamicImports: true,

    },
    plugins: [
        postcss({}),
        resolve({
            extensions: extensions,
            browser: true
        }),
        json(),
        commonjs(),
        typescript(),
        replace({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }),
        image(),

        copy({
            targets: [
                {src: './src/index.html', dest: './dist/'},
                {src: './src/mockServiceWorker.js', dest: './dist/'}
            ],
            verbose: true
        }),
        isDevEnv && dev('dist', {
            host: 'localhost'
        })
    ]
};

Конфигурация TS

{
  "compilerOptions": {
    "declaration": false,
    "module": "ESNext",
    "noImplicitAny": true,
    "target": "ES2015",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "lib": ["DOM", "es2019"]
  },
  "include": [
    "src/**/*.tsx",
    "src/**/*.ts",
    "declaration.d.ts",
    "src/components/TabularVIew/GridContainer/hooks"
],
  "exclude": ["node_modules"]
}

Я использую responsestrap и несколько других библиотек npm в приложении, без проблем.

Компонент выглядит примерно так - просто импорт с прямым именем для нужных мне битов.

import React from  'react';
import {CartesianGrid, Line, LineChart, XAxis, YAxis }  from 'recharts';


export const ThoughtFridge = () => {
    
    const data = [{
        some: 'dataSource',
    }];
    const chartWidth = document.querySelector('body').clientWidth * 0.8;
    const chartHeight = document.querySelector('body').clientHeight * 0.5;
        
    return (
       <React.Fragment>
           <h3>Welcome to the Thought Fridge - a test page for components and clients</h3>
           <h5>Line chart with Recharts - Single day</h5>
           <LineChart width={chartWidth} height={chartHeight} data={data}
                      margin={{top: 5, right: 30, left: 20, bottom: 5}}>
               <XAxis dataKey="blah"/>
               <YAxis />
               <CartesianGrid strokeDasharray="3 3"/>
               {/*<Tooltip/>*/}
               {/*<Legend />*/}
               <Line type="monotone" dataKey="blah2" stroke="#8884d8" activeDot={{r: 8}}/>
           </LineChart>
           
           
       </React.Fragment>
    )
}

Любые предложения приветствуются.