Search code examples
reactjstypescriptherokubuildnestjs

Typescript React / NestJS app fails @Heroku build - "error TS2307: Cannot find module"

I had a Typescript React/Express app that was working great both local and @Heroku. This week I started learning Nest.JS, so I replaced the Express end with it. The app works just fine in local but the Heroku build fails. I went through a number of topics and guides but didn't managed to locate the issue and at this point I'm not even able to decide whether the problem is on the React or the Nest.JS side.

The Heroku build goes well and at some point it quits with the following:

remote: client/src/components/App.tsx:1:19 - error TS2307: Cannot find module 'react' or its corresponding type declarations.
remote: client/src/components/main/Navbar.tsx:3:20 - error TS2307: Cannot find module 'styled-components' or its corresponding type declarations.

Basically every single react, styled-component, router, helmet, etc. import is thrown back with the same error message. I guess it's related to path and stuff like that and I can imagine the solution is rather simple but I can't see it. :/

react tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

nestjs tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": ".",
    "incremental": true,
    "jsx": "react-jsx"
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

react package.json

{
  "name": "project-002",
  "description": "project-002",
  "proxy": "http://127.0.0.1:3001",
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "@types/node": "^14.14.20",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-helmet": "^6.1.0",
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.7",
    "axios": "^0.21.1",
    "dom": "0.0.3",
    "package": "^1.0.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-ga": "^3.3.0",
    "react-helmet": "^6.1.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.1",
    "styled-components": "^5.1.1",
    "typescript": "^4.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

nestjs package.json

{
  "name": "project-002",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "private": true,
  "engines": {
    "node": "14.4.0"
  },
  "license": "UNLICENSED",
  "scripts": {
    "prebuild": "rimraf dist",
    "build": "nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "node dist/main.js",
    "start:dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/src/main.js",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  },
  "dependencies": {
    "@nestjs/common": "^7.5.1",
    "@nestjs/config": "^0.6.1",
    "@nestjs/core": "^7.5.1",
    "@nestjs/mapped-types": "^0.2.0",
    "@nestjs/platform-express": "^7.5.1",
    "compression": "^1.7.4",
    "helmet": "^4.3.1",
    "reflect-metadata": "^0.1.13",
    "rimraf": "^3.0.2",
    "rxjs": "^6.6.3"
  },
  "devDependencies": {
    "@nestjs/cli": "^7.5.1",
    "@nestjs/schematics": "^7.1.3",
    "@nestjs/testing": "^7.5.1",
    "@types/express": "^4.17.8",
    "@types/jest": "^26.0.15",
    "@types/node": "^14.14.6",
    "@types/supertest": "^2.0.10",
    "@typescript-eslint/eslint-plugin": "^4.6.1",
    "@typescript-eslint/parser": "^4.6.1",
    "eslint": "^7.12.1",
    "eslint-config-prettier": "7.1.0",
    "eslint-plugin-prettier": "^3.1.4",
    "jest": "^26.6.3",
    "prettier": "^2.1.2",
    "supertest": "^6.0.0",
    "ts-jest": "^26.4.3",
    "ts-loader": "^8.0.8",
    "ts-node": "^9.0.0",
    "tsconfig-paths": "^3.9.0",
    "typescript": "^4.0.5"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "ts"
    ],
    "rootDir": "src",
    "testRegex": ".*\\.spec\\.ts$",
    "transform": {
      "^.+\\.(t|j)s$": "ts-jest"
    },
    "collectCoverageFrom": [
      "**/*.(t|j)s"
    ],
    "coverageDirectory": "../coverage",
    "testEnvironment": "node"
  }
}

Any ideas what should be done?

Solution

  • Okay, I found my mistake. I'll just leave the thread up in case someone will need in the future.

    I used this script:

    "heroku-postbuild": "npm install && npm install --only=dev --no-shrinkwrap && npm run build"

    but I needed this:

    "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"

    It all looks fine & dandy for now.