Динамический импорт для разделения кода: тип элемента JSX не имеет никакой конструкции или сигнатуры вызовов

Question

Я настраиваю webpack 4 для запуска с React и TypeScript.

Если я пытаюсь использовать функцию динамического импорта, сборка завершается неудачно с: JSX element type 'Hello' does not have any construct or call signatures.

Я пытался выполнить различныезначения конфигурации в tsconfig.json безрезультатно.У меня закончились варианты.

Моя текущая настройка такова.
tsconfig.js:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "lib": [
      "dom",
      "es6"
    ],
    "jsx": "react",
    "declaration": false,
    "sourceMap": false,
    "inlineSourceMap": true,
    "outDir": "./public/static/",
    "strict": true,
    "moduleResolution": "node",
    "noImplicitAny": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "include": [
    "./resources/assets/js/**/*"
  ]
}

webpack.config.js:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

const WEBPACK_ASSETS_PUBLIC_PATH = '/';

module.exports = {
    entry: {
        app: ['./resources/assets/js/App.tsx'],
        vendor: ['react', 'react-dom']
    },
    output: {
        path: resolve(__dirname, 'public', 'static'),
        publicPath: WEBPACK_ASSETS_PUBLIC_PATH,
        filename: 'js/[name].[hash].js',
        chunkFilename: 'js/[name].[hash].js'
    },
    optimization: {
        runtimeChunk: 'single',
        minimize: true
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: resolve(__dirname, 'public', 'static')
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                loader: 'awesome-typescript-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: resolve(__dirname, 'index.html')
        }),
        new ManifestPlugin({
            publicPath: WEBPACK_ASSETS_PUBLIC_PATH
        })
    ]
};

App.tsx:

import * as React from 'react';
import * as ReactDOM from 'react-dom';

(async () => {
    let Hello = await import('./components/Hello');

    ReactDOM.render(<Hello compiler="TypeScript" framework="React" bundler="webpack" />, document.getElementById('root'));
})();

Hello.tsx:

import * as React from 'react';

interface IHelloProps {
    compiler: string,
    framework: string,
    bundler: string
};

export default class Hello extends React.Component<IHelloProps, {}> {
    render () {
        return <h1>This is a {this.props.framework} application using {this.props.compiler} with {this.props.bundler}.</h1>;
    }
};

Если идти статическим путем:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Hello from './components/Hello';

ReactDOM.render(<Hello compiler="TypeScript" framework="React" bundler="webpack" />, document.getElementById('root'));

Тогда все работает безупречно.

Что я делаю не так с динамическим импортом, который выдает ошибки?Из того, что я собрал, это ошибка времени сборки ..

Answer 1

Возможно, это связано с взаимодействием асинхронного импорта и экспорта по умолчанию, я бы попробовал это сделать без экспорта по умолчанию.

Поэтому экспортируйте класс следующим образом:

export class Hello extends React.Component<IHelloProps, {}> {
    // ...
}

иимпортировать это так:

let { Hello } = await import('./components/Hello');