网站搜索

reactjs - 使用组件的动态导入时出现“无发射错误”


我刚进入用户体验领域,所以请随时向我询问回答此问题所需的更多信息。

我有一个 React-Redux-Typescript 项目。我正在尝试基于配置文件中给出的路径动态导入模块。这是用于动态导入的代码:

 import(`../${this.app.appPath}`).then(component => {
    this.component = component.default;
  });

这里 this.app.appPath 将是应用程序落地组件的路径。例如:Test/App

我遇到一个问题,这段代码会导致 typings 文件出错:

我的 tsconfig 配置如下:

{
  "compilerOptions": {
    "diagnostics": true,
    "moduleResolution": "node",
    /* Basic Options */
    "target": "ES2018" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
    "module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "lib": [
      "es6",
      "dom",
      "scripthost",
      "es2018",
      "es2018.promise",
      "esnext"
    ],
    "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
    "sourceMap": true /* Generates corresponding '.map' file. */,
    "outDir": "./.out/" /* Redirect output structure to the directory. */,
    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
    "typeRoots": ["node_modules/@types", "ScriptsApp/@Types"]
  },
  "include": ["./ScriptsApp/**/*.tsx", "./ScriptsApp/**/*.ts"],
  "exclude": ["node_modules", "./ScriptsApp/**/*.d.ts"]
}

我的文件夹结构是这样的:

所以我认为 d.ts 文件不应该被编译。但根据我的理解,动态导入正在导致它们被编译;这就是造成 no emit error 的原因

我的 .ts 文件的 webpack 配置如下:

  {
    test: /\.(ts|tsx)$/,
    exclude: /\.(\.d\.ts)$/,
    loader: "ts-loader",
    options: {
      logLevel: "info",
      silent: false,
      logInfoToStdOut: true
    }
  }

在这里我也排除了 .d.ts 文件,不确定它们为什么会被编译。一旦我移除动态导入的代码,错误就消失了。请帮忙,谢谢。