Why does Typescript "Cannot redeclare block-scoped variable"?

Question

I've seen hacks to make the error message go away.

But my question is why does TS do this?

What is the rationale, and purpose for this? I would expect a language would expect a util library to be imported in multiple files, thus would not consider it a 're-declaration'.

const uuid = require('uuid/v4');

Another file does the same import.

Cannot redeclare block-scoped variable 'uuid'

I can have a const foo = '123' in Module A, and re-declare a const foo = '123' in Module B with no issue.

Because modules are scoped.

Why does import / require behave differently?

What code makes this happen?

// utils.ts
const uuid = require('uuid/v4');
module.exports = function Utils() { ....}
.......

// import-helper.ts
const uuid = require('uuid/v4');
module.exports = function Helper() { ....}
.......

That's it, just two files with identical imports.

Here is the TSConfig

{
  "compilerOptions": {
    // * ===================================================================== *
    // * Basic Options
    // * ===================================================================== *
    "allowJs": true,
    "checkJs": true,
    "target": "ES2020",
    "noEmit": true,
    "pretty": true,
    "noErrorTruncation": true,
    "skipLibCheck": true,
    "jsx": "react",

    // * ===================================================================== *
    // * Strict Type-Checking Options
    // * ===================================================================== *
    "noImplicitAny": false, // disabling for now while converting the existing js code, too many errors otherwise
    // "strictNullChecks": false,
    // "noImplicitThis": false,

    // * ===================================================================== *
    // * Additional Checks
    // * ===================================================================== *
    "noUnusedLocals": true,
    "noUnusedParameters": true,

    // * ===================================================================== *
    // * Module Resolution Options
    // * ===================================================================== *
    "module": "commonjs",
    // "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "~actions/*": ["client/javascripts/state/actions/*"],
      "~components/*": ["client/javascripts/components/*"],
      "~constants/*": ["constants/*"],
      "~server/*": ["server/*"],
      "~client/*": ["client/*"],
      "~shared/*": ["shared/*"],
      "~state/*": ["client/javascripts/state/*"],
      "~utils/*": ["client/javascripts/utils/*"],
    },
    "esModuleInterop": true,
    "resolveJsonModule": true,

    // * ===================================================================== *
    // * Source Map Options
    // * ===================================================================== *
    "sourceMap": true,

    // * ===================================================================== *
    // * Experimental Options
    // * ===================================================================== *
    "experimentalDecorators": true,
  },

  "compileOnSave": false,

  "include": [
    "typings/**/*.d.ts",
    "./client/javascripts/**/*.js",
    "./client/javascripts/**/*.jsx",
    "./client/javascripts/**/*.ts",
    "./client/javascripts/**/*.tsx",
    "./constants/**/*.js",
    "./constants/**/*.ts",
    "./constants/**/*.json",
    "./server/**/*.js",
    "./server/**/*.ts",
    "./shared/**/*.js",
    "./shared/**/*.ts",
  ],

  "exclude": [
    "build",
    "coverage",
    "cypress",
    "dist",
    "locales",
    "node_modules",
    "tests",
  ],
}

Answer 1

When TypeScript doesn't see an import or export, it considers the file to be a script, not a module. This is solved via "moduleDetection": "force" in your tsconfig.json:

{
  "compilerOptions": {
    "moduleDetection": "force"
  }
}   

Reference: https://www.typescriptlang.org/tsconfig#moduleDetection

Original anwser: https://stackoverflow.com/a/74968079/10538886