Latest configstore (6.0.0) moved to ESM; not supported in current configuration

[MartinRosenberg]

Problem

When creating a new application, the latest version of all dependencies seems to be used. configstore recently updated to 6.0.0 which switched from CommonJS to ESM. Unfortunately, this causes an error when trying to run the app. This occurs in both JavaScript and TypeScript versions.

Error

❯ npm start

> [email protected] start
> node build/index.js -- start

node:internal/modules/cjs/loader:1126
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/Martin/Workspace/cli-app/node_modules/configstore/index.js
require() of ES modules is not supported.
require() of /Users/Martin/Workspace/cli-app/node_modules/configstore/index.js from /Users/Martin/Workspace/cli-app/build/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename /Users/Martin/Workspace/cli-app/node_modules/configstore/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/Martin/Workspace/cli-app/node_modules/configstore/package.json.

    at new NodeError (node:internal/errors:363:5)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1126:13)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (/Users/Martin/Workspace/cli-app/build/index.js:16:43)
    at Module._compile (node:internal/modules/cjs/loader:1109:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32) {
  code: 'ERR_REQUIRE_ESM'
}

Solutions

Revert configstore

In order to keep working as it was, the configstore version could be set to ^3.1.5. This is much easier, but it's a bandaid until ESM support in Node is more mature, as configstore will move on with ESM.

Switch to ESM

The longer-term solution. May be worth waiting and using the older version of configstore, because Node's ESM support is still experimental and implementation may change multiple times before it becomes stable.

1. Add "type": "module" to package.json
2. In .babelrc, replace ["@babel/preset-env"] with [["@babel/preset-env", { "modules": false }]]
3. In .tsconfig.json, replace:

   "module": "commonjs",
   

   with:

   "module": "ESNext",
   "moduleResolution": "Node",
   

4. Either:
   1. Add the --experimental-specifier-resolution=node flag to the start script in package.json
   2. Add .js to all file imports, in both JS and TS versions (obviously feels wrong in TS, but it's apparently correct)

[actuallyReallyAlex]

Thanks @MartinRosenberg !

I know I shouldn't just go with the bandaid solution, but it's easy, and I don't have the time currently to devote to this repo :/

Thank you for looking into the problem though. 🍻