reactjs - لا يمكن حل وحدة Typescript

لدي وحدتان في تايب سكريبت ريأكت: moduleA و moduleB.

أنا أحاول استخدام مكون Button.tsx من moduleA عن طريق تصدير Button.tsx في moduleB مع الإشارة إلى هذا المكون باستخدام moduleA.

إليك الخطوات التي أتبعها :

1. تثبيت وتكوين webpack و ts-loader في moduleA.
2. إنشاء بناء باستخدام webpack لـ moduleA.
3. تكوين webpack و ts-loader في moduleB.
4. تثبيت moduleA في moduleB باستخدام npm install ../moduleA.

ثم، أنا أشير إلى مكوّن Button في moduleB، من moduleA باستخدام:

import { Button } from "moduleA";

أنا أتلقى هذا الخطأ :

ERROR in C:\Users\VaibhavPC\Projects\moduleb\src\Start.tsx
./src/Start.tsx
[tsl] ERROR in C:\Users\VaibhavPC\Projects\moduleb\src\Start.tsx(2,24)
      TS2307: Cannot find module './moduleA'

إليكم ملف package.json الخاص بـ moduleA:

{
  "name": "moduleA",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "rm ./lib/* && tsc",
    "magic": "webpack --config webpack.config.js",
    "prepublish": "npm run build",
    "test": "./test.sh"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/chai": "^3.4.35",
    "@types/enzyme": "^2.7.6",
    "@types/mocha": "^2.2.40",
    "@types/react": "^15.0.18",
    "@types/react-dom": "^0.14.23",
    "@types/sinon": "^1.16.36",
    "chai": "^3.5.0",
    "enzyme": "^2.8.0",
    "jsdom": "^9.12.0",
    "mocha": "^3.2.0",
    "react": "^15.4.2",
    "react-addons-test-utils": "^15.4.2",
    "react-dom": "^15.4.2",
    "sinon": "^2.1.0",
    "webpack-cli": "^2.1.4",
    "ts-loader": "^4.3.0",
    "webpack": "^4.10.1"
  },
  "files": [
    "lib",
    "LICENSE",
    "main.js"
  ],
  "types": "./lib/Button.d.ts",
  "dependencies": {
    "typescript": "^2.8.3"
  }
}

و ملف package.json الخاص بـ moduleB.

{
  "name": "tmp",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "rm ./lib/* && tsc",
    "magic": "webpack --config webpack.config.js",
    "prepublish": "npm run build",
    "test": "./test.sh"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/chai": "^3.4.35",
    "@types/enzyme": "^2.7.6",
    "@types/mocha": "^2.2.40",
    "@types/react": "^15.0.18",
    "@types/react-dom": "^0.14.23",
    "@types/sinon": "^1.16.36",
    "chai": "^3.5.0",
    "enzyme": "^2.8.0",
    "jsdom": "^9.12.0",
    "mocha": "^3.2.0",
    "react": "^15.4.2",
    "react-addons-test-utils": "^15.4.2",
    "react-dom": "^15.4.2",
    "sinon": "^2.1.0",
    "webpack-cli": "^2.1.4",
    "ts-loader": "^4.3.0",
    "webpack": "^4.10.1",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-3": "^6.17.0",
    "css-loader": "^0.27.3",
    "json-loader": "^0.5.4",
    "sass-loader": "^6.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "extract-text-webpack-plugin": "^2.0.0-beta.4"
  },
  "files": [
    "lib",
    "LICENSE",
    "main.js"
  ],
  "types": "./lib/hello.d.ts",
  "dependencies": {
    "modulea": "file:../modulea",
    "react-scripts": "1.1.4",
    "typescript": "^2.8.3"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist",
        "target": "es5",
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "declaration": true,
        "sourceMap": true,
        "jsx": "react"
    },
    "include": [
        "./src/**/*.tsx",
        "./src/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

هيكل المجلد:

├── dist
├── node_modules
├── src
├── package.json
├── webpack.config.js
├── tsconfig.json

هل هناك طريقة أخرى للقيام بذلك؟

الإجابة رقم 1

هذا لأن الحزمة التي تُستخدم كاعتماد مكسورة.

يبحث moduleA عن الزر في المكان الخطأ. يحتوي package.json على خاصية main مضبوطة على "main.js". عند استخدام الحزمة، تحاول إيجاد ملف main.js في الدليل الجذر. ولكن وفقًا لبنية مجلدك، فهو غير موجود.

كخطوة للتحقق، انتقل إلى مجلد node_modules الخاص بـ moduleB وافتح moduleA، هل يوجد ملف main.js داخل المجلد؟

لا ينبغي أن يوجد لأنه تم تعيين outDir في tsconfig إلى "./dist". الحل سيكون تغيير main في moduleA إلى "./dist/main.js"