Bundling Typescript in ASP.NET Core

Question

I recently updated an ASP.NET Core/React project to use TypeScript. However I've noticed that in order to get the TypeScript to compile I need to put the imports at the top of the file. When the bundler combines these files the imports do not get removed and this leads to an import declarations may only appear at top level of a module error. The jsx that comes out the other end is fine besides the imports. Is there a way to make the default bundler handle these imports?

bundleconfig.json

[
  {
    "outputFileName": "wwwroot/js/vehicles.jsx",
    "inputFiles": 
     [
       "built/Components/General/VehiclePanel.jsx",
       "built/Components/Vehicles/VehiclePage.jsx"
     ],
     "minify": 
     {
       "enabled": false,
       "renameLocals": false
     },
  },
  {
    "outputFileName": "wwwroot/js/editVehicle.jsx",
    "inputFiles": 
     [
       "built/Components/General/Job.jsx",
       "built/Components/General/History.jsx",
       "built/Components/General/EditVehiclePanel.jsx",
       "built/Components/Vehicles/EditVehiclePage.jsx"
     ],
     "minify": 
     {
       "enabled": false,
       "renameLocals": false
     },
  },
  {
    "outputFileName": "wwwroot/js/editService.jsx",
    "inputFiles": 
     [
       "built/Components/General/Job.jsx",
       "built/Components/General/History.jsx",
       "built/Components/General/ServicePanel.jsx",
       "built/Components/Services/ServicePage.jsx"
     ],
     "minify": 
     {
       "enabled": false,
       "renameLocals": false
     },
  },
]

An example of a component with an import statement

// Name History.tsx
// Author: Redacted
// CreatedDate: 24/02/2020
// ModifiedDate: 29/02/2020
// Description: History panel
import { Component } from 'react';
import { IHistory } from "../../Interfaces/Interfaces";

interface HistoryProps {
    history: IHistory;
}

export class History extends Component<HistoryProps> {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <div className="box">
                    <div className="box-header with-border">
                        <h3 className="box-title">{this.props.history.title}</h3><div className="box-tools pull-right">{this.props.history.createdDateTime}</div>
                    </div>
                    <div className="box-body">
                        {this.props.history.description.split("\n").map(function (history, i) { return <p key={"h" + i}>{history}</p> })}
                    </div>
                </div>
            </div>
        );
    }

}

EDIT: I just noticed the compiled component still has the export statement in front of it. This makes me think it might have something to do with how my typescript is being compiled. I have added my tsconfig.json in case it's relevant.

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "outDir": "./built",
    "allowJs": true,
    "target": "es2015",
    "jsx": "preserve",
    "lib": [ "es2015", "es2016", "dom" ],
    "moduleResolution": "Node",
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "include": [
    "./Scripts/Components/**/*"
  ],
  "exclude": [
    "./Scripts/Interfaces/*"
  ]
}

2nd EDIT: after adding "module": "none" to compilerOptions in tsconfig.json the import and export statements were removed. Unfortunatly this removed the effect of a previous change I had made. I set "moduleResolution": "Node" in compilerOptions to address this being added to the top of all files.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

Answer 1

I solved the issue where this was added to the top of every file.

Object.defineProperty(exports, "__esModule", { value: true });

I had to move the export to the top of the file.

I changed it from this

import * as React from 'react';
import { IVehicle } from "../../Interfaces/Interfaces";

export class VehiclePanel extends React.Component<IVehicle> {

    constructor(props) {
        super(props);
    }

to this

export = VehiclePanel;
import * as React from 'react';
import { IVehicle } from "../../Interfaces/Interfaces";

class VehiclePanel extends React.Component<IVehicle> {

    constructor(props) {
        super(props);
    }