Cannot access 'compilation' before initialization" error

[prndP]

Hi there. I'm getting a "Cannot access 'compilation' before initialization" error during builds in my CI environment. After investigation, I believe I traced this to this line:

embedded-host-node/lib/src/compiler/async.ts

Line 134 in 4bcd8d5

this.compilations.delete(compilation);

.

The dispatcher comment here seems to hint that under some conditions we will call the callback synchronously so I suspect it's hitting that condition in the CI and immediately running callback which then reliably throws the error.

embedded-host-node/lib/src/dispatcher.ts

Line 117 in 4bcd8d5

* events synchronously, `callback` will be called synchronously.

Happy to provide additional details or raise a PR. Thanks for maintaining this project!

[nex3]

We'd need more information to debug or fix this. The error message you list doesn't appear in the embedded host at all, so at least a stack trace would be useful, although without a full reproduction it may still be hard to fix.

[prndP]

Thanks for looking into this! The error message is coming as native runtime error from node itself since the callback is trying to access compliation.

Here's my stack trace

✗ Build failed in 934ms
error during build:
[vite:css] [sass] Cannot access 'compilation' before initialization
file: /__w/3463/s/packages/bk-explorer/client/src/pages/Home.module.scss
at /_w/3463/s/packages/bk-explorer/node_modules/sass-embedded/dist/lib/src/compiler/async.js:97:42
at callback (/__w/3463/s/packages/bk-explorer/node_modules/sass-embedded/dist/lib/src/dispatcher.js:99:20)
at Dispatcher.sendCompileRequest (/__w/3463/s/packages/bk-explorer/node_modules/sass-embedded/dist/lib/src/dispatcher.js:102:13)
at /__w/3463/s/packages/bk-explorer/node_modules/sass-embedded/dist/lib/src/compiler/async.js:96:77
at new Promise (<anonymous>)
at AsyncCompiler.compileRequestAsync (/__w/3463/s/packages/bk-explorer/node_modules/sass-embedded/dist/lib/src/compiler/async.js:96:33)
at AsyncCompiler.compileStringAsync (/__w/3463/s/packages/bk-explorer/node_modules/sass-embedded/dist/lib/src/compiler/async.js:137:21)
at Object.run (file:///__w/3463/s/packages/bk-explorer/node_modules/vite/dist/node/chunks/config.js:31169:34)
at async process (file:///__w/3463/s/packages/bk-explorer/node_modules/vite/dist/node/chunks/config.js:31209:20)
at async compileCSSPreprocessors (file:///__w/3463/s/packages/bk-explorer/node_modules/vite/dist/node/chunks/config.js:30641:27)

Since I don't have a public build I can link to reproduce, I created a script that simulate the issue using the exact same patterns. My suggestion would be to just declare the compiler with let and assign it immediately after. This way the variable exists in scope in the sync use case.

#!/usr/bin/env node
import { Subject } from 'rxjs';
import { filter, map } from 'rxjs/operators';

class AsyncCompiler {
  constructor() {
    this.compilations = new Set();
    this.compilationId = 1;
    this.messages$ = new Subject();
  }

  sendCompileRequest(request, callback) {
    const callback_ = (err, response) => {
      return callback(err, response);
    };

    this.messages$
      .pipe(
        filter(message => message.message.case === 'compileResponse'),
        map(message => message.message.value)
      )
      .subscribe({ 
        next: response => callback_(null, response),
        error: err => callback_(err, null)
      });

    this.messages$.next({ 
      message: { case: 'compileResponse', value: { css: 'compiled' } }
    });
  }

  async compileRequestAsync(request) {
    const compilation = new Promise((resolve, reject) => 
      this.sendCompileRequest(request, (err, response) => {
        try {
          this.compilations.delete(compilation);
          if (this.compilations.size === 0) this.compilationId = 1;
          if (err) reject(err);
          else resolve(response);
        } catch (error) {
          reject(error);
        }
      })
    );
    this.compilations.add(compilation);
    return await compilation;
  }

  async compileRequestAsyncFixed(request) {
    let compilation;
    compilation = new Promise((resolve, reject) => 
      this.sendCompileRequest(request, (err, response) => {
        this.compilations.delete(compilation);
        if (this.compilations.size === 0) this.compilationId = 1;
        if (err) reject(err);
        else resolve(response);
      })
    );
    this.compilations.add(compilation);
    return await compilation;
  }
}

async function main() {
  console.log('=== Error version ===\n');
  const compiler1 = new AsyncCompiler();
  try {
    await compiler1.compileRequestAsync({});
    console.log('No error occurred\n');
  } catch (error) {
    console.log('Error:', error.message, '\n');
  }
  
  console.log('=== Fixed version ===\n');
  const compiler2 = new AsyncCompiler();
  const result = await compiler2.compileRequestAsyncFixed({});
  console.log('Success! Result:', result, '\n');
}

main();

Thanks again

[nex3]

I see, thanks for the clear explanation. I don't think your fix is quite right—we need compilation to be assigned, not just visible, by the time we call this.compilations.delete(compilation), or else it won't properly be removed from this.compilations. I think we'll need to use Promise.withResolvers() to make this work.

Edit: ...or a handwritten equivalent since that is unfortunately only available as of Node 22, and we're locked to Node 20 until it goes out of LTS.