How to deploy app to Heroku if you use Babel and ES6?

Question

I am wrecking my head trying to deploy the app to Heroku. The problem is that I am using ES6 with Babel.

I've found many articles about that but none of them helped me to solve the problem

Even when I build the app locally and try to run it and I have another problem - the paths in the build folder to modules stay the same as it was before compiling by Babel-build Is this an ordinary behaviour, because I never faced that before

It should launch the GraphQL API - "heroku_path/graphql"

I would appreciate your help...

package.json

{
  "name": "cocoon-api",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "src/server.js",
  "scripts": {
    "dev": "babel-watch src/server.js",
    "clean": "rm -rf build && mkdir build",
    "build-babel": "babel -d ./build ./src -s",
    "build": "npm run clean && npm run build-babel",
    "start": "npm run build && node ./build/server.js",
    "heroku-postbuild": "npm install"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "apollo-server-express": "^2.9.14",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "graphql": "^14.5.8",
    "graphql-depth-limit": "^1.1.0",
    "graphql-iso-date": "^3.6.1",
    "graphql-middleware": "^4.0.2",
    "graphql-shield": "^7.0.6",
    "graphql-tag": "^2.10.1",
    "graphql-toolkit": "^0.7.5",
    "graphql-tools": "^4.0.6",
    "jsonwebtoken": "^8.5.1",
    "lodash": "^4.17.15",
    "merge-graphql-schemas": "^1.7.4",
    "mongoose": "^5.8.3",
    "winston": "^3.2.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.7.7",
    "@babel/core": "^7.7.7",
    "@babel/node": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "babel-plugin-import-graphql": "^2.7.0",
    "babel-watch": "^7.0.0",
    "dotenv": "^8.2.0",
    "nodemon": "^2.0.2"
  }
}

error at deployment

$ git push heroku master
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 4 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 344 bytes | 344.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:
remote:        Resolving node version 12.x...
remote:        Downloading and installing node 12.16.1...
remote:        Using default npm version: 6.13.4
remote:
remote: -----> Restoring cache
remote:        - node_modules
remote:
remote: -----> Installing dependencies
remote:        Installing node modules (package.json + package-lock)
remote:        audited 7150 packages in 8.044s
remote:
remote:        13 packages are looking for funding
remote:          run `npm fund` for details
remote:
remote:        found 143 low severity vulnerabilities
remote:          run `npm audit fix` to fix them, or `npm audit` for details
remote:
remote: -----> Build
remote:        Detected both "build" and "heroku-postbuild" scripts
remote:        Running heroku-postbuild
remote:
remote:        > [email protected] heroku-postbuild /tmp/build_900f276e6b5aac117b7994386823a0a9
remote:        > npm install
remote:
remote:        audited 7150 packages in 8.008s
remote:
remote:        13 packages are looking for funding
remote:          run `npm fund` for details
remote:
remote:        found 143 low severity vulnerabilities
remote:          run `npm audit fix` to fix them, or `npm audit` for details
remote:
remote: -----> Caching build
remote:        - node_modules
remote:
remote: -----> Pruning devDependencies
remote:        Skipping because NPM_CONFIG_PRODUCTION is 'false'
remote:
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote:
remote: -----> Compressing...
remote:        Done: 31.5M
remote: -----> Launching...
remote:        Released v11
remote:        https://aqueous-springs-82481.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/aqueous-springs-82481.git
   5cd7f10..4abee83  master -> master

error with paths

Successfully compiled 29 files with Babel.
internal/modules/cjs/loader.js:613
    throw err;
    ^

Error: Cannot find module '../environment'
Require stack:
- C:\Users\Валерий\Documents\Projects\cocoon-api\build\server.js

structure

Procfile

web: npm run start

Answer 1

It appears that your server.js file is in the same directory as /environment.

But the path you specify from server.js to /environment should only have one period before it. Change ../environment to ./environment.

EDIT

It seems that the project just needs a module path resolver, and babel offers one: babel-plugin-module-resolver

Adding this with proper configuration to your build process should allow you to simply deploy with the correct paths placed into your build

Answer 2

Easy,

1. Add this plugin for module path resolver: babel-plugin-module-resolver

2. Create a file in the root called babel.config.js, in development I use src folders and in production I build my app in a dist folder (in your case you used build folder) example:

   module.exports = {
      presets: [
        ['@babel/preset-env', { targets: { node: 'current' } }],
        '@babel/preset-typescript'
      ],
      plugins: [
        ['module-resolver', {
          alias: {
            "@modules": "./src/modules",
            "@config": "./src/config",
            "@shared": "./src/shared"
          }
        }],
        "babel-plugin-transform-typescript-metadata",
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }],
      ],
    }
   

3. Add your build script to package.json (use YARN or NPM):

    "scripts": {
      "build": "yarn babel src --extensions \".js,.ts\" --out-dir dist --copy-files && npx typeorm migration:run",
      "start": "node dist/shared/infra/http/server.js",
    }
   

In my case, I don't need a script for cleaning/removing the old dist folder (or build in your case).

Let me know if it worked.