Question

我正在设置webpack 4以使用React和TypeScript运行。

如果我尝试使用动态导入功能，则构建将失败并显示：setTimeout(function () { postgis.connect(); }, 10000);

我在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>;
    }
};

然后它完美无缺。

我输错的动态导入是怎么回事？从我收集的内容来看，这是一个构建时错误。

Answer 1

也许这是由于异步导入和默认导出的交互，我尝试没有默认导出。

所以像这样导出这个类：

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

并像这样导入：

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

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

1 个答案: