web-dev-qa-db-ja.com

TypeScriptモジュールを解決できません

TypeScript反応モジュールが2つあります：moduleAとmoduleB。

moduleAのButton.tsxをmoduleBにエクスポートして、moduleAを使用してこのコンポーネントを参照することにより、Button.tsxのコンポーネントを使用しようとしています。

これが私が従うステップです：

  1. moduleAへのwebpackおよびts-loaderのインストールと構成。
  2. moduleAのwebpackを使用してビルドを作成しています。
  3. moduleBでのWebpackとts-loaderの構成。
  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"
  }
}

moduleBのpackage.json。

{
  "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

それを行う他の方法はありますか？

reactjstypescriptwebpack
11
Vaibhav Agrawal

これは、依存パッケージが壊れているためです。

moduleAボタンをエクスポートすると、間違った場所が表示されます。 packageのmainプロパティはmain.jsに設定されているため、パッケージが使用されている場合、プロジェクトのルートディレクトリでmain.jsを探しています。しかし、あなたの質問のフォルダツリーによると、それは存在しません。

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

確認手順として、moduleBのnode_modulesフォルダーに移動し、moduleAを確認します。ベースフォルダー内にmain.jsがありますか？

tsconfigにはoutDirが./distに設定されているため、おそらく存在しません。解決策は、moduleAのmainを./dist/main.jsに変更することです。

1
pizzaisdavid