Reactjs 代码拆分的动态导入：JSX元素类型没有任何构造或调用签名

我正在设置Webpack4以使用React和TypeScript运行

如果我尝试使用动态导入功能，生成将失败：

JSX元素类型“Hello”没有任何构造或调用签名。

我尝试了

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/**/*"
  ]
}

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
        })
    ]
};

webpack.config.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/**/*"
  ]
}

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'));
})();

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'));

import*as React from'React'；
从“react dom”导入*作为react dom；
从“./components/Hello”导入Hello；
ReactDOM.render（，document.getElementById（'root'））；

然后它就完美地工作了

---

动态导入会抛出错误，我做错了什么？从我收集的信息来看，这是一个构建时错误。

也许这是由于异步导入和默认导出的交互，我会在没有默认导出的情况下尝试

这样导出类：

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

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

---

也许这是由于异步导入和默认导出的交互作用，我会尝试不使用默认导出

这样导出类：

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

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

---

是的，这很有效。有没有线索说明它为什么不能使用默认导出，以及如何使其工作？哦，似乎只是ES2015规范实现了这一点。是的，这很有效。有什么线索可以解释为什么它不能使用默认导出，以及如何使它工作吗？哦，似乎是ES2015规范实现了这一点。