Babel not transpiling npm link/symlink package source code

Question

I´m setting up a shared module environment using node. Here is my directory structure:

project
 |--common
 |    |--package.json
 |    |--graphql
 |          |----schema.js
 |
 |--server
     |--package.json
     |--server.js

Linking both projects:

$ cd project\common
$ npm link

Then:

$ cd ../server
$ npm link common

common Package.json file:

{
  "name": "common",
  "private": true,
  "version": "3.0.0",
  "description": "Common code for all projects",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Me",
  "license": "MIT"
}

server package.json file:

{
  "name": "server",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "concurrently \"babel-node start-server\" \"babel-node start-client\"",
    "server": "nodemon --exec \"babel-node start-server.js\"",
    "client": "nodemon --exec \"babel-node start-client.js\"",
    "lint": "eslint ."
  },
  "dependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.17.2",
    "common": "file:../common",
    "connect-mongo": "^2.0.0",
    "crypto": "^1.0.1",
    "express": "^4.15.3",
    "express-graphql": "^0.6.12",
    "graphql": "^0.13.1",
    "graphql-relay": "^0.5.4",
    "jwt-simple": "^0.5.1",
    "mongoose": "^5.0.10",
    "morgan": "^1.8.2",
    "nodemailer": "^4.6.0",
    "passport": "^0.4.0",
    "passport-jwt": "^4.0.0",
    "path": "^0.12.7",
    "validator": "^9.1.1"
  },
  "devDependencies": {
    "concurrently": "3.5.1",
    "eslint": "^4.18.2",
    "eslint-config-airbnb": "16.1.0",
    "eslint-plugin-import": "2.9.0",
    "eslint-plugin-jsx-a11y": "6.0.3",
    "eslint-plugin-react": "7.7.0",
    "fs-extra": "^5.0.0",
    "node-fetch": "^2.1.1",
    "nodemon": "^1.11.0"
  },
  "babel": {
    "presets": [
      "es2015",
      "stage-0",
      "es2017"
    ],
    "plugins": [
      "transform-runtime"
    ]
  }
}

Server.js code:

import schema from "common/graphql/schema";
...

Running server application:

$ npm run server
import { GraphQLSchema } from 'graphql';
^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at loader (D:\project\server\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (D:\project\server\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:/9. DEV/WORKSPACE/amplifactory/server/routes.js:25:1)
    at Module._compile (module.js:570:32)
    at loader (D:\project\server\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (D:\project\server\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
[nodemon] app crashed - waiting for file changes before starting...

From what I´ve seen that is not transpiling code outside server directory, but without putting common ouside server directory I cannot build my shared code.

How to solve this babel issue and make it transpile correctly ?

Answer 1

You aren't going to like it, and maybe there is a better answer in spring 2018, but you may need to have a separate build step for your common code. I have a similar project where the package.json file for the common code looks something like this:

{
  "name": "stripmall_gcloud_services",
  "version": "1.0.0",
  "description": "wraps up some commonly used google helpers",
  "main": "./dist/index.js",
  "scripts": {
    "test": "standard --fix && mocha -r babel-register",
    "build": "babel lib -d dist"
  }...}

Notice the npm build step that transpiles the common code, and notice that the main key points to the index.js file in the transpiled directory. You just run npm run build whenever you update your common code and all your linking will work as you would expect.