Cannot find module ESM and Commands not loading properly

[yordis]

Hey folks, I have the following setup, https://github.com/straw-hat-team/cli/tree/master/packages/cli which I am trying to convert to ESM

But I keep getting the following:

➜  react-hooks git:(master) DEBUG=* node ./node_modules/@straw-hat/cli/bin/run.js help
node:internal/process/esm_loader:94
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/ubi/Developer/github.com/straw-hat-team/cli/node_modules/@oclif/core/flush' imported from /Users/ubi/Developer/github.com/straw-hat-team/cli/packages/cli/bin/run.js
Did you mean to import @oclif/core/flush.js?
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:416:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

I fixed this by adding the extension to the import (is that required now?)

#!/usr/bin/env node

import oclif from '@oclif/core';
import flush from '@oclif/core/flush.js';
import handle from '@oclif/core/handle.js';

oclif.run().then(flush).catch(handle);

But then the commands don't seem to be working properly

➜  react-hooks git:(master) DEBUG=* node ./node_modules/@straw-hat/cli/bin/run.js help
  config reading core plugin /Users/ubi/Developer/github.com/straw-hat-team/cli/node_modules/@oclif/core +0ms
  config loadJSON /Users/ubi/Developer/github.com/straw-hat-team/cli/node_modules/@oclif/core/package.json +0ms
  config loadJSON /Users/ubi/Developer/github.com/straw-hat-team/cli/node_modules/@oclif/core/oclif.manifest.json +0ms
  config loadJSON /Users/ubi/Developer/github.com/straw-hat-team/cli/node_modules/@oclif/core/.oclif.manifest.json +0ms
  config reading user plugins pjson /Users/ubi/.local/share/@oclif/core/package.json +0ms
  config loadJSON /Users/ubi/.local/share/@oclif/core/package.json +0ms
  config config done +0ms
  config start init hook +0ms
  config init hook done +1ms
  config runCommand help [] +0ms
  config start command_not_found hook +1ms
  config command_not_found hook done +0ms
 ›   Error: command help not found
➜  react-hooks git:(master)

Any idea of what the proper setup suppose to be for an ESM project? I can't find an example project of it.

Thanks in advanced,

[rpastro]

@yordis To answer your first question. The extension is mandatory when loading an ES module with import.

The second issue may be related to oclif not loading the config from the proper directory. Try passing the absolute path of your project's directory as the second parameter to oclif.run.

oclif.run(process.argv.slice(2), <project path>).then(flush).catch(handle);

[yordis]

@rpastro let me try, also, why is that required in this particular case? I cant find information about it

[yordis]

Passing the absolute path works ... but how would that work once I publish the package then? I am confused about what is going on and what is the proper fix.

Do you have some documentation or implementation references?

[rpastro]

@rpastro let me try, also, why is that required in this particular case? I cant find information about it

@yordis See https://nodejs.org/docs/latest-v16.x/api/esm.html#mandatory-file-extensions

[rpastro]

@yordis Since there is no __dirname in ES modules, you can get the directory where your source file is located as follows:

import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

Once you have the __dirname you can then adjust it to determine the base path of your project.

[typhonrt]

Again apologies since I haven't worked on any Oclif / ESM aspects since ~May in my own projects using the new ESM functionality I helped add to Oclif. I gather the documentation was not created by the Oclif team yet.

Check out how you can bootstrap things w/ ESM depending on your Node version:
https://github.com/typhonjs-oclif-scratch/test-cli-modern
https://github.com/typhonjs-oclif-scratch/test-cli-cjs-interop

Depending on Node version you can do the following (Node 12.20+ or 14.13+):

#!/usr/bin/env node
import { run, flush, Errors } from '@oclif/core';

run(void 0, import.meta.url)
.then(flush)
.catch(Errors.handle);

or for CJS interop for named exports on Node 12.17+ / 14.0+:

#!/usr/bin/env node
import oclif from '@oclif/core';

oclif.run(void 0, import.meta.url)
.then(oclif.flush)
.catch(oclif.Errors.handle);

The above is for ./bin/run.js.

Also as of last time I checked the rest of the Oclif infrastructure wasn't updated for deployment of ESM CLIs, so this may still be the case and demo instructions are here. Requires a custom build of Oclif config v1 adding ESM support for the old dev CLI publishing step. This likely could be out of date as I don't have visibility into the current state of Oclif v2 / development progress since ~May and the additional upgrades to the dev CLI publishing step:
#130 (comment)

[yordis]

I am gonna close this folks, I went back to the old version. Until the official website, and official samples are not in ESM I will probably wait for things to be settled a bit.

Thank you regardless, you actually helped me to understand the problems ahead.