Angular Cannot find name 'Buffer'

[JonathanBouligny]

Hi, Jimp cant seem to find the node types. I read around the issues and found that there were issues with buffer in version .28. I downgraded to .27 and this didn't help. I was wondering if this was still an issue or if I incorrectly imported the files.

ERROR in node_modules/jimp/jimp.d.ts(18,24): error TS2304: Cannot find name 'Buffer'.

I think this may be an error with the .d.ts file because I'm not using buffer in the code.

I have imported the type for Jimp into my dev dependencies (npm i --save-dev @types/node), but the new version of Jimp says it doesnt need these types it has its own. I have also put "types":["node"] into my tsconfig.json file.

Code

    import { Component, OnInit } from '@angular/core';
    import * as jimp from 'jimp';

    @Component({
      selector: 'app-jimp-test',
      templateUrl: './jimp-test.component.html',
      styleUrls: ['./jimp-test.component.css']
    })
    export class JimpTestComponent implements OnInit {

      constructor() { }

      ngOnInit() {
        this.testJimp();
      }

      testJimp() {
        jimp.read('assets/testInput.jpg').then( (img) => {
          img.clone().blur(1).write('assets/testOutput.jpg');
        });
      }

    }

Dependencies

    {
      "name": "my-playground",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "^6.0.3",
        "@angular/common": "^6.0.3",
        "@angular/compiler": "^6.0.3",
        "@angular/core": "^6.0.3",
        "@angular/forms": "^6.0.3",
        "@angular/http": "^6.0.3",
        "@angular/platform-browser": "^6.0.3",
        "@angular/platform-browser-dynamic": "^6.0.3",
        "@angular/router": "^6.0.3",
        "core-js": "^2.5.4",
        "jimp": "^0.2.28",
        "rxjs": "^6.0.0",
        "zone.js": "^0.8.26"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~0.6.8",
        "@angular/cli": "~6.0.8",
        "@angular/compiler-cli": "^6.0.3",
        "@angular/language-service": "^6.0.3",
        "@types/jasmine": "~2.8.6",
        "@types/jasminewd2": "~2.0.3",
        "@types/jimp": "^0.2.28",
        "@types/node": "^8.9.5",
        "codelyzer": "~4.2.1",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~1.7.1",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.0",
        "karma-jasmine": "~1.1.1",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.3.0",
        "ts-node": "~5.0.1",
        "tslint": "~5.9.1",
        "typescript": "~2.7.2"
      }
    }

Angular Versions

    @angular-devkit/architect         0.6.8
    @angular-devkit/build-angular     0.6.8
    @angular-devkit/build-optimizer   0.6.8
    @angular-devkit/core              0.6.8
    @angular-devkit/schematics        0.6.8
    @angular/cli                      6.0.8
    @ngtools/webpack                  6.0.8
    @schematics/angular               0.6.8
    @schematics/update                0.6.8
    rxjs                              6.2.1
    typescript                        2.7.2
    webpack                           4.8.3

Jimp Version

0.2.28

Thanks

Sorry for the edits..more information

[david-boles]

I think I was having this problem a couple of days ago but I'm not sure what ended up fixing it. Right now I'm using this NPM package to be able to read a file into JIMP with a FileReader but its worth trying to read from something that is explicitly a URL (e.g. http://) first.

[david-boles]

Whoops, I think #453 did the trick actually.

[JonathanBouligny]

I reverted and still got nothing :/

In intellij its saying when i edit the .d.ts file CANNOT FIND NAME BUFFER all over thefle

declare namespace Jimp {

    type ImageCallback = (err: Error|null, image: Jimp) => any;

    interface RGB {
        r: number;
        g: number;
        b: number;
    }
    interface RGBA {
        r: number;
        g: number;
        b: number;
        a: number;
    }

    interface Jimp {
        bitmap: {data: Buffer, width: number, height: number};

        clone(cb?: Jimp.ImageCallback): Jimp;
        quality(n: number, cb?: Jimp.ImageCallback): this;
        deflateLevel(l: number, cb?: Jimp.ImageCallback): this;
        deflateStrategy(s: number, cb?: Jimp.ImageCallback): this;
        filterType(f: number, cb?: Jimp.ImageCallback): this;

        rgba(bool: boolean, cb?: Jimp.ImageCallback): this;
        background(hex: number, cb?: Jimp.ImageCallback): this;
        scan(x: number, y: number, w: number, h: number, f: (x:number, y:number, idx:number)=>any, cb?: Jimp.ImageCallback): this;
        getMIME(): string;
        getExtension(): string;
        getPixelIndex(x: number, y: number, cb?: (err:Error, i:number)=>any): number;
        getPixelColor(x: number, y: number, cb?: (err:Error, hex:number)=>any): number;
        setPixelColor(hex: number, x: number, y: number, cb?: Jimp.ImageCallback): this;
        hash(base?: number, cb?: (err:Error, hash: string)=>any): string;
        crop(x: number, y: number, w: number, h: number, cb?: Jimp.ImageCallback): this;
        autocrop(tolerance?: number, cropOnlyFrames?: boolean, cb?: Jimp.ImageCallback): this
        blit(src: Jimp, x: number, y: number, srcx?: number, srcy?: number, srcw?: number, srch?: number, cb?: Jimp.ImageCallback): this
        mask(src: Jimp, x: number, y: number, cb?: Jimp.ImageCallback): this
        composite(src: Jimp, x: number, y: number, cb?: Jimp.ImageCallback): this;
        brightness(val: number, cb?: Jimp.ImageCallback): this;
        contrast(val: number, cb?: Jimp.ImageCallback): this;
        posterize(n: number, cb?: Jimp.ImageCallback): this;
        histogram(): {r: number[], g: number[], b: number[]};
        normalize(cb?: Jimp.ImageCallback): this;
        invert(cb?: Jimp.ImageCallback): this;
        mirror(horizontal: boolean, vertical: boolean, cb?: Jimp.ImageCallback): this;
        gaussian(r: number, cb?: Jimp.ImageCallback): this;
        blur(r: number, cb?: Jimp.ImageCallback): this;

        greyscale(cb?: Jimp.ImageCallback): this;
        grayscale(cb?: Jimp.ImageCallback): this;
        sepia(cb?: Jimp.ImageCallback): this;
        opacity(f: any, cb?: any):this;
        fade(f: any, cb?: any): this;
        opaque(cb: any): this;
        resize(w: number, h: number, mode?: string, cb?: Jimp.ImageCallback): this;
        cover(w: number, h: number, alignBits?: number, mode?: string, cb?: Jimp.ImageCallback): this;
        contain(w: number, h: number, alignBits?: number, mode?: string, cb?: Jimp.ImageCallback): this;
        scale(f: number, mode?: string, cb?: Jimp.ImageCallback): this;
        scaleToFit(w: number, h: number, mode?: any, cb?: Jimp.ImageCallback): this;
        rotate(deg: number, mode?: number|boolean, cb?: Jimp.ImageCallback): this;
        getBuffer(mime: string, cb:(err:Error, buffer:Buffer)=>any): this;

        write(path: string, cb?: Jimp.ImageCallback): this;
    }

    var Jimp: {

        // used to auto resizing etc.
        AUTO: number;

        // supported mime types
        MIME_PNG: string;
        MIME_JPEG: string;
        MIME_BMP: string;

        // PNG filter types
        PNG_FILTER_AUTO: number;
        PNG_FILTER_NONE: number;
        PNG_FILTER_SUB: number;
        PNG_FILTER_UP: number;
        PNG_FILTER_AVERAGE: number;
        PNG_FILTER_PAETH: number;

        // resize methods
        RESIZE_NEAREST_NEIGHBOR: string;
        RESIZE_BILINEAR: string;
        RESIZE_BICUBIC: string;
        RESIZE_HERMITE: string;
        RESIZE_BEZIER: string;

        // Align modes for cover, contain, bit masks
        HORIZONTAL_ALIGN_LEFT: number;
        HORIZONTAL_ALIGN_CENTER: number;
        HORIZONTAL_ALIGN_RIGHT: number;

        VERTICAL_ALIGN_TOP: number;
        VERTICAL_ALIGN_MIDDLE: number;
        VERTICAL_ALIGN_BOTTOM: number;

        // Font locations
        FONT_SANS_8_BLACK: string;
        FONT_SANS_16_BLACK: string;
        FONT_SANS_32_BLACK: string;
        FONT_SANS_64_BLACK: string;
        FONT_SANS_128_BLACK: string;

        FONT_SANS_8_WHITE: string;
        FONT_SANS_16_WHITE: string;
        FONT_SANS_32_WHITE: string;
        FONT_SANS_64_WHITE: string;
        FONT_SANS_128_WHITE: string;

        (path: string, cb?: Jimp.ImageCallback): Jimp;
        (image: Jimp, cb?: Jimp.ImageCallback): Jimp;
        (data: Buffer, cb?: Jimp.ImageCallback): Jimp;
        (w: number, h: number, cb?: Jimp.ImageCallback): Jimp;

        read(src: string|Buffer, cb?: Jimp.ImageCallback): Promise<Jimp>;

        rgbaToInt(r: number, g: number, b: number, a: number, cb?: (err: Error, i: number)=>any): number;
        intToRgba(i: number, cb?: (err:Error, rgba: Jimp.RGBA)=>any): Jimp.RGBA;
        limit255(n: number): number;
        diff(img1: Jimp, img2: Jimp, threshold?: number): {percent: number, diff: Jimp};
        distance(img1: Jimp, img2: Jimp): number;

        prototype: Jimp;
    };
}

declare module "jimp" {
    export = Jimp.Jimp;
}

[david-boles]

If you can share your environment I'd be happy to try poking around in it but otherwise I don't know, sorry.

[JonathanBouligny]

I actually got it to #453! I needed to put types : [node] in my tsconfig.app.json file not my tsconfig.json file. A little confusing. Now when I run import * j from 'jimp' i get the error cannot find definition file but I downloaded the @types/jimp file.

It says Cannot find type definition file for 'jimp' I put "types" : ["node","jimp"] in my tsconfig.app.json file Theres no typescript file in the @types/jimp folder does this mean I cant use Jimp for angular or should i put in the new typescript file from the updated version?

How do I share my environment just zip up all my files?

[david-boles]

Sorry, I think this is beyond me, I'm pretty new to Typescript. For my project I've just switched to using the version actually built for web, it generally seems to work better (less other buffer type related issues for me) and might be easier to get working for you.

[hipstersmoothie]

@JonathanBouligny did you get this working?

[hipstersmoothie]

Solution posted here https://stackoverflow.com/questions/51256473/angular-cannot-find-name-buffer

yarn add -D  @types/node       

{
  "types": [
    "node"
  ]
}

[Jobin-S]

I actually got it to #453! I needed to put types : [node] in my tsconfig.app.json file not my tsconfig.json file. A little confusing. Now when I run import * j from 'jimp' i get the error cannot find definition file but I downloaded the @types/jimp file.

It says Cannot find type definition file for 'jimp'I put "types" : ["node","jimp"]in my tsconfig.app.json file Theres no typescript file in the @types/jimp folder does this mean I cant use Jimp for angular or should i put in the new typescript file from the updated version?

How do I share my environment just zip up all my files?

Thanks this works