动态导入组件时“无发射错误”

时间:2018-11-29 00:43:54

标签: reactjs typescript webpack ecmascript-6

我是UX世界的新手,所以请问我是否需要更多信息来回答这个问题。

我有一个React-Redux-Typescript项目。我正在尝试根据配置文件中提供的路径来动态导入模块。这是动态导入的代码:

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

此处this.app.appPath将是应用程序着陆组件的路径。例如;测试/应用

我遇到一个问题,这段代码导致输入文件错误: enter image description here

我的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"]
}

我的文件夹结构是这样:

enter image description here

所以,我认为不应编译d.ts文件。但是动态导入导致它们按照我的理解进行编译。这就是导致不发出错误

的原因

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

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

这里我也排除了.d.ts文件,不确定为什么要编译它们。删除用于动态导入的代码后,错误就会消失。请帮助,谢谢。

0 个答案:

没有答案