Theo's Typesafe Cult•2y ago

CommonJS/Module Errors Feel Random?

Hey! I have two projects with an identical configuration. For some reason, one project will run while the other one will fail due to an ES Module error. package.json and tsconfig.json of project that works:

# package.json
{
  "name": "assessment_server",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "ts-node src/index.ts"
  },
  "dependencies": {
    "@prisma/client": "^5.0.0",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@types/cors": "^2.8.13",
    "@types/express": "^4.17.17",
    "@types/node": "^20.4.5",
    "@types/uuid": "^9.0.2",
    "prisma": "^5.0.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6"
  }
}

# tsconfig.json
{
    "compilerOptions": {
        "sourceMap": true,
        "outDir": "dist",
        "strict": true,
        "lib": [
            "esnext"
        ],
        "esModuleInterop": true
    }
}

# package.json
{
  "name": "assessment_server",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "ts-node src/index.ts"
  },
  "dependencies": {
    "@prisma/client": "^5.0.0",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@types/cors": "^2.8.13",
    "@types/express": "^4.17.17",
    "@types/node": "^20.4.5",
    "@types/uuid": "^9.0.2",
    "prisma": "^5.0.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6"
  }
}

# tsconfig.json
{
    "compilerOptions": {
        "sourceMap": true,
        "outDir": "dist",
        "strict": true,
        "lib": [
            "esnext"
        ],
        "esModuleInterop": true
    }
}

package.json and tsconfig.json of project that does not work:

# package.json
{
  "name": "cli-test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "ts-node src/index.ts"
  },
  "dependencies": {
    "chalk": "^5.3.0",
    "commander": "^11.0.0",
    "figlet": "^1.6.0"
  },
  "devDependencies": {
    "@types/figlet": "^1.5.6",
    "@types/node": "^20.4.5",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6"
  }
}

# tsconfig.json
{
    "compilerOptions": {
        "sourceMap": true,
        "outDir": "dist",
        "strict": true,
        "lib": [
            "esnext"
        ],
        "esModuleInterop": true
    }
}

# package.json
{
  "name": "cli-test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "ts-node src/index.ts"
  },
  "dependencies": {
    "chalk": "^5.3.0",
    "commander": "^11.0.0",
    "figlet": "^1.6.0"
  },
  "devDependencies": {
    "@types/figlet": "^1.5.6",
    "@types/node": "^20.4.5",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6"
  }
}

# tsconfig.json
{
    "compilerOptions": {
        "sourceMap": true,
        "outDir": "dist",
        "strict": true,
        "lib": [
            "esnext"
        ],
        "esModuleInterop": true
    }
}

The first project is basically the prisma-express.js example from their github repo. The second project is just me trying to learn how to make a CLI app.

6 Replies

metalpipemomoOP•2y ago

The error:

metalpipemomoOP•2y ago

I am using ES imports in both projects. Is there something I am fundamentally missing/misunderstanding? Here is index.ts of the app that does not work:

import chalk from "chalk";
import figlet from "figlet";
import { Command } from "commander";

const program = new Command();

program
    .name("cli-test")
    .version(
        "1.0.0",
        "-v, --version",
        chalk.blue("Display the version number.")
    )
    .description("Testing a cli application.")
    .parse(process.argv);

const options = program.opts();

console.log(chalk.blue(figlet.textSync("Howdy!")));

import chalk from "chalk";
import figlet from "figlet";
import { Command } from "commander";

const program = new Command();

program
    .name("cli-test")
    .version(
        "1.0.0",
        "-v, --version",
        chalk.blue("Display the version number.")
    )
    .description("Testing a cli application.")
    .parse(process.argv);

const options = program.opts();

console.log(chalk.blue(figlet.textSync("Howdy!")));

(I understand that I can likely solve the issue by following the helpful chain of error messages but that would land me in a config that looks quite different. I want to understand why I can't use the same config here!)

scott2breal•2y ago

My guess would be one of the dependencies of the project that is failing does not support ESM, and uses require internally

metalpipemomoOP•2y ago

Ah, is there a way to work around that?

scott2breal•2y ago

Might have something to do with the message in chalk's readme https://github.com/chalk/chalk#install

GitHub

GitHub - chalk/chalk: 🖍 Terminal string styling done right

🖍 Terminal string styling done right. Contribute to chalk/chalk development by creating an account on GitHub.

metalpipemomoOP•2y ago

I see!! I will look into that, thanks for the pointers.

Gaming

Programming

CommonJS/Module Errors Feel Random?