Error: unexpected top-level await at node_modules/ttf2woff2/dist/index.js:9

[timint]

Error: unexpected top-level await at node_modules/ttf2woff2/dist/index.js:9

ttf2woff2 = (await import('bindings')).default('addon.node').convert;

Using Node v23.1.0. This package version 5 came as a dependency from gulp-iconfont. I tried upgrading to image2woff2 6.0.1 but the error remains.

From my gulpfile.mjs:

import iconfont from 'gulp-iconfont';

I also tried this without luck:

import { createRequire } from 'node:module';
const require = createRequire(import.meta.url);

const iconfont = require('gulp-iconfont');

[timint]

This seems to be a compatibility breaker related to ESM and CommonJS.
https://evertpot.com/using-top-level-await-is-bc-break/

[timint]

From my understanding this is the line that caused gulpfile.mjs to break during import iconfont from 'gulp-iconfont'; (ERR_REQUIRE_ASYNC_MODULE):

    ttf2woff2 = (await import('bindings')).default('addon.node').convert;

This error seemed to be irellevant of gulp-iconfont as I got it with the other gulp font packs as well using ttf2woff2.

When rewriting the file like the following I get the libraries to load and run.

index.ts

import { YError, printStackTrace } from 'yerror';
import debug from 'debug';
import { env } from 'node:process';

const doDebug = debug('ttf2woff2');

const ttf2woff2Promise: Promise<(input: Buffer) => Buffer> = new Promise((resolve, reject) => {
  let ttf2woff2: undefined | ((input: Buffer) => Buffer) = undefined;

  if (!env.TTF2WOFF2_VERSION || env.TTF2WOFF2_VERSION?.toLowerCase() === 'native') {
    import('bindings')
      .then(bindings => {
        ttf2woff2 = bindings.default('addon.node').convert;
        doDebug('✅ Using native version.');
        resolve(ttf2woff2);
      })
      .catch(err => {
        doDebug('❌ Could not load the native version.', printStackTrace(err));
        checkWasmVersion();
      });
  } else {
    checkWasmVersion();
  }

  function checkWasmVersion() {
    if (!env.TTF2WOFF2_VERSION || env.TTF2WOFF2_VERSION?.toLowerCase() === 'wasm') {
      if (!ttf2woff2) {
        import('../jssrc/index.js')
          .then(module => {
            ttf2woff2 = module.default;
            doDebug('✅ Using WASM version.');
            resolve(ttf2woff2);
          })
          .catch(err => {
            doDebug('❌ Could not load the WASM version.', printStackTrace(err));
            reject(new YError('E_UNABLE_TO_LOAD_TTF2WOFF2', env.TTF2WOFF2_VERSION));
          });
      }
    } else {
      reject(new YError('E_UNABLE_TO_LOAD_TTF2WOFF2', env.TTF2WOFF2_VERSION));
    }
  }
});

export default ttf2woff2Promise;

But this just unlocked another problem. When specifying woff2 in the formats it stops with a gulp-ttf2woff2 Error:

[00:31:59] Error in plugin "gulp-ttf2woff2"
Error
    at BufferStream.ttf2woff2TransformCb [as _bufferCallback] (file:///.......)/node_modules/gulp-ttf2woff2/dist/index.js:24:23)
    at BufferStream._bufferStreamCallbackWrapper (file:///......../node_modules/bufferstreams/dist/index.js:64:14)
    at Object.onceWrapper (node:events:627:28)
    at BufferStream.emit (node:events:525:35)
    at BufferStream.emit (node:domain:552:15)
    at finish (node:internal/streams/writable:953:10)
    at node:internal/streams/writable:934:13
    at process.processTicksAndRejections (node:internal/process/task_queues:90:21)

[michenus]

Try this code

import { YError, printStackTrace } from 'yerror';
import debug from 'debug';
import { env } from 'node:process';
import bindings from 'bindings'
import ttf2woff2Loader from '../jssrc/index.js';

const doDebug = debug('ttf2woff2');
let ttf2woff2 = undefined;
if (!env.TTF2WOFF2_VERSION ||
    env.TTF2WOFF2_VERSION?.toLowerCase() === 'native') {
    try {
        ttf2woff2 = bindings.default('addon.node').convert;
        doDebug('✅ Using native version.');
    }
    catch (err) {
        doDebug('❌ Could not load the native version.', printStackTrace(err));
    }
}
if (!env.TTF2WOFF2_VERSION || env.TTF2WOFF2_VERSION?.toLowerCase() === 'wasm') {
    if (!ttf2woff2) {
        try {
            ttf2woff2 = ttf2woff2Loader
            doDebug('✅ Using WASM version.');
        }
        catch (err) {
            doDebug('❌ Could not load the WASM version.', printStackTrace(err));
        }
    }
}
if (!ttf2woff2) {
    throw new YError('E_UNABLE_TO_LOAD_TTF2WOFF2', env.TTF2WOFF2_VERSION);
}
export default ttf2woff2;

[timint]

👍 Thank you for replying. Yes! That seems to have solved the ASYNC error.

I am using gulp-iconfont which uses this library as a dependency. Now that it runs without error it renders 0 byte fonts. That could be another issue with gulp-fonticon. Reported here nfroidure/gulp-iconfont#211

[ProAndSmiDev]

can you add please this solve into the release's version? cause i got same issue for gulp-ttf2woff2 and it uses the last version of yours and after changing file "index.js" in a dir "node_modules" this problem was solved

[ProAndSmiDev]

it needs to be fixed

[pioug]

Thanks all for helping fixing this 🙇 A new version v7.0.0 including this fix has been published on npm.

It would be cool if some of you can confirm that it works for them, as we are worried about potential regressions (#90 (comment)). That would give us more confidence to update other packages that depend on it.

It should be testable by overriding/forcing dependencies:

{
  "overrides": {
    "ttf2woff2": "^7.0.0"
  }
}