TypeError: tsModule.formatDiagnosticsWithColorAndContext is not a function

[dlarr]

Hello,

I am following this tutorial : https://hackernoon.com/how-to-create-library-in-angular-2-and-publish-to-npm-from-scratch-f2b1272d6266 to learn how to create a lib usable through npm install my-lib

The point, is I am not creating his empty-text directive, but directly my needed component (based on angular, material)

And when I try to package with rollup, i got the following error :
rollup-plugin-typescript: Unknown compiler option 'lib'.

Someone suggested to use rollup-plugin-typescript2 which I did.

I now have a weird error and I can't find a solution.

lib/date-picker.ts → dist/date-picker.umd.js...
[!] TypeError: tsModule.formatDiagnosticsWithColorAndContext is not a function
TypeError: tsModule.formatDiagnosticsWithColorAndContext is not a function
at C:_dev\components\pcie-datepicker\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:19521:33
at arrayMap (C:_dev\components\pcie-datepicker\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:710:23)
at map (C:_dev\components\pcie-datepicker\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:9621:14)
at convertDiagnostic (C:_dev\components\pcie-datepicker\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:19518:12)
at Object.options (C:_dev\components\pcie-datepicker\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:19829:43)
at Bundle$$1.options.plugins.reduce (C:\Users\utilisateur\AppData\Roaming\npm\node_modules\rollup\dist\rollup.js:17912:42)
at Array.reduce (native)
at new Bundle$$1 (C:\Users\utilisateur\AppData\Roaming\npm\node_modules\rollup\dist\rollup.js:17911:26)
at Object.rollup (C:\Users\utilisateur\AppData\Roaming\npm\node_modules\rollup\dist\rollup.js:18714:18)
at build (C:\Users\utilisateur\AppData\Roaming\npm\node_modules\rollup\bin\rollup:20950:16)

Here is my rollup config fil :

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import angular from 'rollup-plugin-angular';
import typescript from 'rollup-plugin-typescript2';


var sass = require('node-sass');
import {nameLibrary,PATH_SRC,PATH_DIST} from './config-library.js';

export default {
    entry: PATH_SRC+nameLibrary+'.ts',
    format: 'umd',
    moduleName: nameLibrary,
    sourceMap:true,
    external: [
        '@angular/core',
        '@angular/material'
    ],
    dest:PATH_DIST+nameLibrary+".umd.js",
    plugins: [
        angular(
            {
                preprocessors:{
                    template:template => template,
                    style: scss => {
                        let css;
                        if(scss){
                            css = sass.renderSync({ data: scss }).css.toString();
                        }else{
                            css = '';
                        }
                        return css;
                    },
                }
            }
        ),
        typescript({
            typescript:require('typescript')
        }),
        resolve({
            module: true,
            main: true
        }),
        commonjs({
            include: 'node_modules/**',
        })
    ],
    onwarn: warning => {
        const skip_codes = [
            'THIS_IS_UNDEFINED',
            'MISSING_GLOBAL_NAME'
        ];
        if (skip_codes.indexOf(warning.code) != -1) return;
        console.error(warning);
    }
};

And my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "sourceMap":   true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": true,
    "outDir": "./dist",
    "lib": ["es2015", "dom"]
  },
  "files": ["./lib/date-picker.ts"],
  "exclude": [
    "node_modules"
  ]
}

Have you ever seen this error ? because, there is not much on this on google :(

[dlarr]

No one ever got this error ? :/

[minato-namikaze]

Did you found a fix ?

[dlarr]

No, I didn't, I moved to another way of doing this. I now use gulp tasks to automate this.

[minato-namikaze]

OK. Actually, I found out that it's because of a LINT issue with some classes that was not detected by AngularCLI ng lint command. Maybe because I based my library upon an AngularCLI project, then I ejected webpack and put rollupjs. I might have an issue in the lint/typescript configuration.
I fixed issues in classes one by one, each time rebuilding the lib locally. Right now, I don't have this error anymore.

[gitgudchannel]

I have the same problem and no idea where to start

[lonnenjunior]

I took a look at the git repository and changed my dependencies and devDependencies as follows:

"dependencies": {
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "rxjs": "^5.3.0",
    "zone.js": "^0.8.9"
  },
  "devDependencies": {
    "@angular/compiler": "^4.1.0",
    "@angular/compiler-cli": "^4.1.0",
    "@types/node": "^7.0.14",
    "del": "^2.2.2",
    "node-sass": "^4.5.3",
    "rollup-plugin-angular": "^0.4.4",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-typescript": "^0.8.1",
    "typescript": "^2.3.2"
  }

Now it works for me.

[Inori-Lover]

i got this error too but it resolved after npm i -D typescript
thanks to @lonnenjunior

[shellscape]

Hey folks (this is a canned reply, but we mean it!). Thanks to everyone who participated in this issue. We're getting ready to move this plugin to a new home at https://github.com/rollup/plugins, and we have to do some spring cleaning of the issues to make that happen. We're going to close this one, but it doesn't mean that it's not still valid. We've got some time yet before the move while we resolve pending Pull Requests, so if this issue is still relevant, please @ me and I'll make sure it gets transferred to the new repo. 🍺