Switch module config in tsconfig.json

[karlhorky]

Switch "module" config in tsconfig.json:

1. Switch "module": "ESNext" to "module": "Preserve" for bundler environments
2. Switch "module": "ESNext" to "module": "NodeNext" for Node.js
3. Switch "moduleResolution": "Bundler" to "moduleResolution": "NodeNext" for Node.js

Reasoning

1. According to Matt Pocock, "module": "Preserve" more closely matches what bundlers do than "module": "ESNext":
   • https://twitter.com/mattpocockuk/status/1766064573130444872
   • https://www.totaltypescript.com/tsconfig-cheat-sheet#not-transpiling-with-typescript
2. Also according to Matt Pocock, "module": "NodeNext" and "moduleResolution": "NodeNext" should be used if transpiling with tsc (which would be the case for Node.js projects)

[karlhorky]

@ProchaLu if you could test this on all of our supported project environments, then we can go ahead with this one:

• Node.js
• create-react-app
• Next.js
• Expo

[ProchaLu]

It is important to update the TypeScript version to v.5.4.0 because setting "module": "Preserve" will fail if the TypeScript version is below v5.4.0.

Node.js

Updated the tsconfig.json files for the "Random Color Generator" and "Meme Scraper" projects. The application runs smoothly locally and when deployed, without encountering any issues.

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "eslint-config-upleveled/tsconfig.base.json",
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext"
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/*.js",
    "**/*.jsx",
    "**/*.cjs",
    "**/*.mjs"
  ]
}

create-react-app

Updated the tsconfig.json file and all create-react-app student projects run without encountering issues.

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "eslint-config-upleveled/tsconfig.base.json",
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "target": "ES2015",
    "module": "Preserve",
    "moduleResolution": "Bundler",
    "moduleDetection": "force",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react-jsx",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "strict": true,
    "incremental": true,
    "noUncheckedIndexedAccess": true
  },
  "exclude": ["../../node_modules", "../../build"],
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/*.js",
    "**/*.jsx",
    "**/*.cjs",
    "**/*.mjs"
  ]
}

Next.js

After updating the tsconfig.json file, and running the dev server, Next.js reconfigures the tsconfig.json file, and updates the module to esnext

   We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.
   The following mandatory changes were made to your tsconfig.json:

        - module was set to esnext (for dynamic import() support)

Expo

Updated the tsconfig.json file and Expo projects ran without encountering issues.

[karlhorky]

Looks like Next.js (next@14.2.0-canary.63) now supports "module": "Preserve" without changing unnecessary tsconfig.json options:

• feat: allow module: Preserve tsconfig option vercel/next.js#64110