Module parse failed on tiff/lib-esm/tiffDecoder.js

[reda-alaoui]

Hello,

I am trying to use image-js with ESM from an Angular application. I get the following error:

ERROR in ../node_modules/tiff/lib-esm/tiffDecoder.js 13:12
2021-10-11T22:10:54.877685815Z Module parse failed: Unexpected token (13:12)
2021-10-11T22:10:54.877688343Z You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
2021-10-11T22:10:54.877690795Z | };
2021-10-11T22:10:54.877693407Z | export default class TIFFDecoder extends IOBuffer {
2021-10-11T22:10:54.877695648Z >     _nextIFD;
2021-10-11T22:10:54.877697974Z |     constructor(data) {
2021-10-11T22:10:54.877700254Z |         super(data);

If I take a look at tiff/lib-esm/tiffDecoder.js, I see:

import { decompressZlib } from './zlib';
const defaultOptions = {
    ignoreImageData: false,
    onlyFirst: false,
};
export default class TIFFDecoder extends IOBuffer {
    _nextIFD;
    constructor(data) {
        super(data);
        this._nextIFD = 0;
    }
//...

_nextIFD declaration is not supported by the bundler.

This is the config used by tiff library:

rhousni@rhousni:~/projects/tiff$ tsc --showConfig --project tsconfig.esm.json
{
    "compilerOptions": {
        "esModuleInterop": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "strict": true,
        "target": "esnext",
        "module": "es6",
        "outDir": "./lib-esm",
        "declaration": false
    },
    "files": [
        "./src/horizontalDifferencing.ts",
        "./src/ifd.ts",
        "./src/ifdValue.ts",
        "./src/index.ts",
        "./src/lzw.ts",
        "./src/tiffDecoder.ts",
        "./src/tiffIfd.ts",
        "./src/types.ts",
        "./src/zlib.ts",
        "./src/tags/exif.ts",
        "./src/tags/gps.ts",
        "./src/tags/standard.ts"
    ],
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "./src/**/__tests__"
    ]
}

So I guess JS class variable declaration is only supported in a future ECMAScript version.

Changing the TS target to es2017 fixes the issue. Would you accept a PR for this?

[reda-alaoui]

According to https://github.com/microsoft/TypeScript/issues/45236#issuecomment-889188097, this can also be fixed by disabling useDefineForClassFields.

[targos]

"target": "esnext" is a mistake. We'd gladly accept a PR to change it to "es2020" (which is supported by Node.js 12 and later, and doesn't set useDefineForClassFields)

[reda-alaoui]

Thank you. Do you know when I can expect an image-js release including this fix? Just to know if I need to fix it myself until then.

[targos]

Is far as I know, there doesn't need to be an image-js release. You should be able to upgrade using npm update on your side, because the version is compatible with the range used in image-js: https://github.com/image-js/image-js/blob/93d3cce18279cf1efe82a0e39f288d2276036959/package.json#L104

[reda-alaoui]

Ok I just saw that. Thanks again !

[reda-alaoui]

I don't know if you saw it but the release seems to have failed.

[targos]

Thanks, I'm working on it 😄

[targos]

It should be fine now.