Dynamics Community Forum Thread Details

My goal is to consume onLoad and onChange from RxJS using Typescript.

I know that Dynamics 365 doesn't support Typescript and ES6 modules, which makes transpiling ES6 modules extremelly challenging.

I've been trying to get a tiny sample code to work but it seems that my transpiled code is not working. It seems that I can't figure out the right configuration to bundle my code into something that CRM/browser can understand.

Here is my code:

import { iif, of, interval } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

module FUS {

    export function onLoad(executionContext: any) {
        console.log("onLoad");

        const r$ = of('R');
        const x$ = of('X');
        
        interval(1000)
          .pipe(mergeMap(v => iif(() => v % 4 === 0, r$, x$)))
          .subscribe(console.log);
    }
}

And I have uploaded RxJS as a web resource from this CDN

For Transpiling, I have used tsc, rollup and browserify, separately of course, but none of them worked for me.

tsc

This is my tscongif.json

{
  "compilerOptions": {
    "target": "ES3",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "amd",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["ES2015", "DOM"],                             /* Specify library files to be included in the compilation. */
    "outDir": "./build/opportunity",                        /* Redirect output structure to the directory. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

rollup.js

This is config

import typescript from 'rollup-plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input:'src/opportunity/form.ts',
  output: {
    file: 'build/opportunity/form.js',
    format: 'amd'
    //"amd", "cjs", "system", "es", "" or "umd".
  },
  external: [ 'rxjs', 'rxjs/operators' ], 

  plugins: [
    typescript(),
    resolve({browser: true, mainFields: ['module']}),
  ]
}

browserify

browserify .\src\opportunity\form.ts -p [ tsify  ] --ignore rxjs > .\build\opportunity\form.js

Here are the most common errors I get:

require is not defined
define is not defined
rxjs is not defined
Cannot use import statement outside a module

There are very few blog posts about consuming Typescript with Dynamics 365 using XrmDefinitelyTyped but none of them covered consuming/bundling an npm module such as RxJS in my case.

Any guidance would be really helpful.