Sitecore JSS + TypeScript + Manifest + Path Mapping

__readme.md

Notes

Typical examples of using Sitecore JSS with TypeScript involve using ts-node for the manifest generation process to compile manifest definition files. ts-node uses standard node resolution process to resolve modules, it does not respect the paths property from tsconfig.json which is a TypeScript compiler feature.

If you want to use the TypeScript compiler path mapping feature for manifest generation, it is recommended to use the tsconfig-paths library: https://github.com/dividab/tsconfig-paths

Then you simply need to register tsconfig-paths in config.js when you register ts-node and be sure they are both configured to use the same tsconfig.json file. This can easily be done by setting the TS_NODE_PROJECT environment variable.

Also be sure that the paths and baseUrl properties are properly set in the tsconfig.json file you use for manifest generation. Manifest generation is a separate process from building your JSS+TypeScript app, so it will typically make more sense to have a dedicated tsconfig.json file for manifest generation as opposed to extending the tsconfig.json used by the app.

file/folder structure:

/src
  sitecore-config.ts
/sitecore
  config.js
  tsconfig.json
  /definitions
    something.sitecore.ts

config.js

// this file is imported by default prior to executing the jss manifest command
// use this to enable transpilation or any other pre-manifest configurations that are needed.
const path = require('path');

const tsconfigPath = path.resolve(__dirname, '../tsconfig.json');
process.env['TS_NODE_PROJECT'] = tsconfigPath;
console.log(
  `Enabling TypeScript transpilation for the manifest using configuration '${
    process.env['TS_NODE_PROJECT']
  }'...`
);

require('ts-node/register');
// be sure to require `tsconfig-paths` after `ts-node`
require('tsconfig-paths/register');

sitecore-config.js

export const APP_NAME = 'my app yo!';

something.sitecore.ts

import { CommonFieldTypes, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
import { APP_NAME } from 'app/sitecore-config';

export default function(manifest: Manifest): void {
  console.log('APP_Name', APP_NAME);
  manifest.addComponent({
    name: 'BlahComponent',
    fields: [
      {
        name: 'someifled',
        type: CommonFieldTypes.Checkbox,
      },
    ],
  });
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "importHelpers": true,
    "sourceMap": true,
    "declaration": false,
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "noUnusedLocals": false,
    "target": "es5",
    "newLine": "LF",
    "lib": ["es2017", "dom", "esnext.asynciterable"],
    "paths": {
      "app/*": ["../src/*"]
    },
    "baseUrl": "."
  }
}