用于代码拆分的动态导入: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');