CODEWITHSUNDEEP
reactjstypescriptwebpack
Vaibhav Agrawal
Vaibhav Agrawal

Reputation: 742

Can't resolve Typescript module

I have two Typescript react modules: moduleA and moduleB.

I am trying to use a component Button.tsx from moduleA by exporting the Button.tsx in moduleB referring to this component using moduleA.

Here's the steps I am following :

  1. Installing and Configuring webpack and ts-loader in moduleA.
  2. creating build using webpack of moduleA.
  3. configuring the webpack and ts-loader in moduleB.
  4. installing moduleA in moduleB using npm install ../moduleA.

Then, I am referring the Button component in moduleB, from moduleA using:

import { Button } from "moduleA";

I am getting this error :

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'

Here's my package.json of 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"
  }
}

and package.json of 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"
    ]
}

folder structure:

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

Is there any other way to do it?

Upvotes: 11

Views: 10224

Answers (1)

pizzaisdavid
pizzaisdavid

Reputation: 469

This is because the package that is being used as a dependency is broken.

moduleA looks for the button in the wrong place. The package.json has the main property set to "main.js". When the package is used, it tries to find the main.js file in the root directory. But according to your folder structure it does not exist.

As a verification step, go to moduleB's node_modules folder and open moduleA, is there a main.js inside the folder?

It shouldn't exist because tsconfig has outDir set to "./dist". The solution would be to change moduleA's main to "./dist/main.js"

Upvotes: 4

Related Questions