ค้นหาเว็บไซต์

reactjs - "ไม่มีข้อผิดพลาดในการส่ง" กับการนำเข้าคอมโพเนนต์แบบไดนามิก


ฉันเป็นมือใหม่ในโลก UX ดังนั้นโปรดสอบถามฉันหากต้องการข้อมูลเพิ่มเติมเพื่อตอบคำถามนี้

ฉันมีโปรเจกต์ 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

การกำหนดค่า webpack ของฉันสำหรับไฟล์ .ts มีดังนี้:

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

ที่นี่ฉันก็จะยกเว้นไฟล์ .d.ts ด้วย ไม่แน่ใจว่าทำไมพวกมันถึงถูกคอมไพล์ ทันทีที่ฉันลบโค้ดสำหรับการนำเข้าแบบไดนามิก ข้อผิดพลาดก็หายไป กรุณาช่วยหน่อย ขอบคุณ