refactor: use type: module (t3-oss#1666)

imo every project in 2023 should use `type: module` Soon we will have an ESM `eslint.config.js` file and then it's just postcss left in cjs land...
mittalsam98 · Nov 19, 2023 · 3317a41 · 3317a41
1 parent 66213b0
commit 3317a41
Show file tree

Hide file tree

Showing 51 changed files with 136 additions and 129 deletions.
diff --git a/.changeset/rich-seahorses-happen.md b/.changeset/rich-seahorses-happen.md
@@ -0,0 +1,5 @@
+---
+"create-t3-app": patch
+---
+
+refactor: use `type: module` for more modern setup
diff --git a/cli/src/helpers/createProject.ts b/cli/src/helpers/createProject.ts
@@ -57,8 +57,8 @@ export const createProject = async ({
  if (appRouter) {
  // Replace next.config
  fs.copyFileSync(
- path.join(PKG_ROOT, "template/extras/config/next-config-appdir.mjs"),
- path.join(projectDir, "next.config.mjs")
+ path.join(PKG_ROOT, "template/extras/config/next-config-appdir.js"),
+ path.join(projectDir, "next.config.js")
  );
 
  selectLayoutFile({ projectDir, packages });

diff --git a/cli/src/installers/envVars.ts b/cli/src/installers/envVars.ts
@@ -15,11 +15,11 @@ export const envVariablesInstaller: Installer = ({ projectDir, packages }) => {
 
  const envFile =
  usingAuth && usingDb
- ? "with-auth-db.mjs"
+ ? "with-auth-db.js"
  : usingAuth
- ? "with-auth.mjs"
+ ? "with-auth.js"
  : usingDb
- ? "with-db.mjs"
+ ? "with-db.js"
  : "";
 
  if (envFile !== "") {
@@ -28,7 +28,7 @@ export const envVariablesInstaller: Installer = ({ projectDir, packages }) => {
  "template/extras/src/env",
  envFile
  );
- const envSchemaDest = path.join(projectDir, "src/env.mjs");
+ const envSchemaDest = path.join(projectDir, "src/env.js");
  fs.copySync(envSchemaSrc, envSchemaDest);
  }
 
@@ -45,7 +45,7 @@ const getEnvContent = (
  usingDrizzle: boolean
 ) => {
  let content = `
-# When adding additional environment variables, the schema in "/src/env.mjs"
+# When adding additional environment variables, the schema in "/src/env.js"
 # should be updated accordingly.
 `
  .trim()

diff --git a/cli/src/installers/tailwind.ts b/cli/src/installers/tailwind.ts
@@ -26,8 +26,8 @@ export const tailwindInstaller: Installer = ({ projectDir }) => {
  const postcssCfgSrc = path.join(extrasDir, "config/postcss.config.cjs");
  const postcssCfgDest = path.join(projectDir, "postcss.config.cjs");
 
- const prettierSrc = path.join(extrasDir, "config/_prettier.config.mjs");
- const prettierDest = path.join(projectDir, "prettier.config.mjs");
+ const prettierSrc = path.join(extrasDir, "config/_prettier.config.js");
+ const prettierDest = path.join(projectDir, "prettier.config.js");
 
  const cssSrc = path.join(extrasDir, "src/styles/globals.css");
  const cssDest = path.join(projectDir, "src/styles/globals.css");

diff --git a/cli/template/base/next.config.mjs → cli/template/base/next.config.js b/cli/template/base/next.config.mjs → cli/template/base/next.config.js
@@ -2,7 +2,7 @@
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
  * for Docker builds.
  */
-await import("./src/env.mjs");
+await import("./src/env.js");
 
 /** @type {import("next").NextConfig} */
 const config = {

diff --git a/cli/template/base/package.json b/cli/template/base/package.json
@@ -1,6 +1,7 @@
 {
  "name": "template",
  "version": "0.1.0",
+ "type": "module",
  "private": true,
  "scripts": {
  "dev": "next dev",

diff --git a/cli/template/base/src/env.mjs → cli/template/base/src/env.js b/cli/template/base/src/env.mjs → cli/template/base/src/env.js
@@ -28,13 +28,13 @@ export const env = createEnv({
  // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
  },
  /**
- * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
- * This is especially useful for Docker builds.
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
+ * useful for Docker builds.
  */
  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
  /**
- * Makes it so that empty strings are treated as undefined.
- * `SOME_VAR: z.string()` and `SOME_VAR=''` will throw an error.
+ * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
+ * `SOME_VAR=''` will throw an error.
  */
  emptyStringAsUndefined: true,
 });
diff --git a/cli/template/base/tsconfig.json b/cli/template/base/tsconfig.json
@@ -35,7 +35,7 @@
  "**/*.ts",
  "**/*.tsx",
  "**/*.cjs",
- "**/*.mjs",
+ "**/*.js",
  ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]

diff --git a/...mplate/extras/config/_prettier.config.mjs → ...emplate/extras/config/_prettier.config.js b/...mplate/extras/config/_prettier.config.mjs → ...emplate/extras/config/_prettier.config.js
diff --git a/cli/template/extras/config/drizzle.config.ts b/cli/template/extras/config/drizzle.config.ts
@@ -1,6 +1,6 @@
 import { type Config } from "drizzle-kit";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env";
 
 export default {
  schema: "./src/server/db/schema.ts",

diff --git a/...late/extras/config/next-config-appdir.mjs → ...plate/extras/config/next-config-appdir.js b/...late/extras/config/next-config-appdir.mjs → ...plate/extras/config/next-config-appdir.js
@@ -2,7 +2,7 @@
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
  * for Docker builds.
  */
-await import("./src/env.mjs");
+await import("./src/env.js");
 
 /** @type {import("next").NextConfig} */
 const config = {};

diff --git a/cli/template/extras/src/app/api/trpc/[trpc]/route.ts b/cli/template/extras/src/app/api/trpc/[trpc]/route.ts
@@ -1,7 +1,7 @@
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 import { type NextRequest } from "next/server";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env";
 import { appRouter } from "~/server/api/root";
 import { createTRPCContext } from "~/server/api/trpc";
 

diff --git a/cli/template/extras/src/env/with-auth-db.mjs → cli/template/extras/src/env/with-auth-db.js b/cli/template/extras/src/env/with-auth-db.mjs → cli/template/extras/src/env/with-auth-db.js
diff --git a/cli/template/extras/src/env/with-auth.mjs → cli/template/extras/src/env/with-auth.js b/cli/template/extras/src/env/with-auth.mjs → cli/template/extras/src/env/with-auth.js
diff --git a/cli/template/extras/src/env/with-db.mjs → cli/template/extras/src/env/with-db.js b/cli/template/extras/src/env/with-db.mjs → cli/template/extras/src/env/with-db.js
diff --git a/cli/template/extras/src/pages/api/trpc/[trpc].ts b/cli/template/extras/src/pages/api/trpc/[trpc].ts
@@ -1,6 +1,6 @@
 import { createNextApiHandler } from "@trpc/server/adapters/next";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env";
 import { appRouter } from "~/server/api/root";
 import { createTRPCContext } from "~/server/api/trpc";
 

diff --git a/cli/template/extras/src/server/auth-app/base.ts b/cli/template/extras/src/server/auth-app/base.ts
@@ -5,7 +5,7 @@ import {
 } from "next-auth";
 import DiscordProvider from "next-auth/providers/discord";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env";
 
 /**
  * Module augmentation for `next-auth` types. Allows us to add custom properties to the `session`

diff --git a/cli/template/extras/src/server/auth-app/with-drizzle.ts b/cli/template/extras/src/server/auth-app/with-drizzle.ts
@@ -6,7 +6,7 @@ import {
 } from "next-auth";
 import DiscordProvider from "next-auth/providers/discord";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env";
 import { db } from "~/server/db";
 import { mysqlTable } from "~/server/db/schema";
 

diff --git a/cli/template/extras/src/server/auth-app/with-prisma.ts b/cli/template/extras/src/server/auth-app/with-prisma.ts
@@ -6,7 +6,7 @@ import {
 } from "next-auth";
 import DiscordProvider from "next-auth/providers/discord";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env";
 import { db } from "~/server/db";
 
 /**

diff --git a/cli/template/extras/src/server/auth-pages/base.ts b/cli/template/extras/src/server/auth-pages/base.ts
@@ -6,7 +6,7 @@ import {
 } from "next-auth";
 import DiscordProvider from "next-auth/providers/discord";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env";
 
 /**
  * Module augmentation for `next-auth` types. Allows us to add custom properties to the `session`

diff --git a/cli/template/extras/src/server/auth-pages/with-drizzle.ts b/cli/template/extras/src/server/auth-pages/with-drizzle.ts
@@ -7,7 +7,7 @@ import {
 } from "next-auth";
 import DiscordProvider from "next-auth/providers/discord";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env";
 import { db } from "~/server/db";
 import { mysqlTable } from "~/server/db/schema";
 

diff --git a/cli/template/extras/src/server/auth-pages/with-prisma.ts b/cli/template/extras/src/server/auth-pages/with-prisma.ts
@@ -7,7 +7,7 @@ import {
 } from "next-auth";
 import DiscordProvider from "next-auth/providers/discord";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env";
 import { db } from "~/server/db";
 
 /**

diff --git a/cli/template/extras/src/server/db/db-prisma.ts b/cli/template/extras/src/server/db/db-prisma.ts
@@ -1,6 +1,6 @@
 import { PrismaClient } from "@prisma/client";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env";
 
 const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;

diff --git a/cli/template/extras/src/server/db/index-drizzle.ts b/cli/template/extras/src/server/db/index-drizzle.ts
@@ -1,7 +1,7 @@
 import { Client } from "@planetscale/database";
 import { drizzle } from "drizzle-orm/planetscale-serverless";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env";
 import * as schema from "./schema";
 
 export const db = drizzle(

diff --git a/upgrade/next.config.mjs → upgrade/next.config.js b/upgrade/next.config.mjs → upgrade/next.config.js
@@ -6,7 +6,7 @@ import { getHighlighter } from "shiki";
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
  * for Docker builds.
  */
-await import("./src/env.mjs");
+await import("./src/env.js");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {

diff --git a/upgrade/package.json b/upgrade/package.json
@@ -1,6 +1,7 @@
 {
  "name": "@ct3a/upgrade",
  "version": "0.1.0",
+ "type": "module",
  "private": true,
  "scripts": {
  "build": "next build",

diff --git a/upgrade/prettier.config.mjs → upgrade/prettier.config.js b/upgrade/prettier.config.mjs → upgrade/prettier.config.js
diff --git a/upgrade/src/env.mjs → upgrade/src/env.js b/upgrade/src/env.mjs → upgrade/src/env.js
diff --git a/upgrade/src/lib/utils.ts b/upgrade/src/lib/utils.ts
@@ -2,7 +2,7 @@ import { request } from "@octokit/request";
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env";
 
 export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs));

diff --git a/upgrade/tsconfig.json b/upgrade/tsconfig.json
@@ -32,7 +32,7 @@
  "**/*.ts",
  "**/*.tsx",
  "**/*.cjs",
- "**/*.mjs",
+ "**/*.js",
  ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]

diff --git a/www/src/components/docs/folderStructureDiagram.astro b/www/src/components/docs/folderStructureDiagram.astro
@@ -15,7 +15,7 @@
  const allFiles = {
  "public/favicon.ico": [], // This file is included in every configuration
  "prisma/schema.prisma": ["prisma"], // This file is included with prisma
- "src/env.mjs": [],
+ "src/env.js": [],
  "src/pages/_app.tsx": [],
  "src/pages/api/auth/[...nextauth].ts": ["nextauth"],
  "src/pages/api/trpc/[trpc].ts": ["trpc"],
@@ -32,10 +32,10 @@
  ".eslintrc.cjs": [],
  ".gitignore": [],
  "next-env.d.ts": [],
- "next.config.mjs": [],
+ "next.config.js": [],
  "package.json": [],
  "postcss.config.cjs": ["tailwind"],
- "prettier.config.mjs": ["tailwind"],
+ "prettier.config.js": ["tailwind"],
  "README.md": [],
  "tailwind.config.ts": ["tailwind"],
  "tsconfig.json": [],

diff --git a/www/src/pages/ar/deployment/docker.md b/www/src/pages/ar/deployment/docker.md
@@ -20,7 +20,7 @@ dir: rtl
 
 ### 1. إعداد Next
 
-في ملف [`next.config.mjs`](https://github.com/t3-oss/create-t3-app/blob/main/cli/template/base/next.config.mjs) قم بإضافة `standalone` حتى [تُقلل حجم الصور تلقائيا](https://nextjs.org/docs/advanced-features/output-file-tracing):
+في ملف [`next.config.js`](https://github.com/t3-oss/create-t3-app/blob/main/cli/template/base/next.config.js) قم بإضافة `standalone` حتى [تُقلل حجم الصور تلقائيا](https://nextjs.org/docs/advanced-features/output-file-tracing):
 
 ```diff
 export default defineNextConfig({
@@ -115,7 +115,7 @@ ENV NODE_ENV production
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
-COPY --from=builder /app/next.config.mjs ./
+COPY --from=builder /app/next.config.js ./
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/package.json ./package.json
 

diff --git a/www/src/pages/ar/folder-structure.mdx b/www/src/pages/ar/folder-structure.mdx
@@ -191,9 +191,9 @@ import Form from "../../components/docs/folderStructureForm.astro";
 </div>
 <div>
 
-### `next.config.mjs`
+### `next.config.js`
 
-يستخدم ملف `next.config.mjs` لإعداد Next.js، لمزيد من المعلومات [Next.js Docs](https://nextjs.org/docs/api-reference/next.config.js/introduction). تلميح: يسمح تمديد `.mjx` باستخدام ESM imports.
+يستخدم ملف `next.config.js` لإعداد Next.js، لمزيد من المعلومات [Next.js Docs](https://nextjs.org/docs/api-reference/next.config.js/introduction). تلميح: يسمح تمديد `.mjx` باستخدام ESM imports.
 
 </div>
 <div data-components="tailwind">
@@ -205,9 +205,9 @@ import Form from "../../components/docs/folderStructureForm.astro";
 </div>
 <div data-components="tailwind">
 
-### `prettier.config.mjs`
+### `prettier.config.js`
 
-إن ملف `prettier.config.mjs` ضروري عند استخدام Prettier ولإضافة prettier-plugin-tailwindcss لتنظيم الفئات (classes) مع Tailwind CSS، لمزيد من المعلومات [Tailwind CSS blog post](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier).
+إن ملف `prettier.config.js` ضروري عند استخدام Prettier ولإضافة prettier-plugin-tailwindcss لتنظيم الفئات (classes) مع Tailwind CSS، لمزيد من المعلومات [Tailwind CSS blog post](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier).
 
 </div>
 <div>

diff --git a/www/src/pages/ar/usage/env-variables.md b/www/src/pages/ar/usage/env-variables.md
@@ -71,10 +71,10 @@ const validated = schema.parse(process.env);
 
 ## إستخدام الـ Environment Variables
 
-إذا أردت إستخدام الـ env vars فيمكنك إستيراد` env.mjs` واستعمالهم طبيعيا. إذا إستيرادت الملف في Client وحولت استعمال قيم الserver-side، ستنذر بوجود خطأ في run-time.
+إذا أردت إستخدام الـ env vars فيمكنك إستيراد` env.js` واستعمالهم طبيعيا. إذا إستيرادت الملف في Client وحولت استعمال قيم الserver-side، ستنذر بوجود خطأ في run-time.
 
 ```ts:pages/api/hello.ts
-import { env } from "../../env.mjs";
+import { env } from "../../env.js";
 
 // `env` is fully typesafe and provides autocompletion
 const dbUrl = env.DATABASE_URL;

diff --git a/www/src/pages/en/deployment/docker.md b/www/src/pages/en/deployment/docker.md
@@ -16,7 +16,7 @@ Please note that Next.js requires a different process for build time (available
 
 ### 1. Next Configuration
 
-In your [`next.config.mjs`](https://github.com/t3-oss/create-t3-app/blob/main/cli/template/base/next.config.mjs), add the `standalone` output-option configuration to [reduce image size by automatically leveraging output traces](https://nextjs.org/docs/advanced-features/output-file-tracing):
+In your [`next.config.js`](https://github.com/t3-oss/create-t3-app/blob/main/cli/template/base/next.config.js), add the `standalone` output-option configuration to [reduce image size by automatically leveraging output traces](https://nextjs.org/docs/advanced-features/output-file-tracing):
 
 ```diff
 export default defineNextConfig({
@@ -108,7 +108,7 @@ ENV NODE_ENV production
 
 # ENV NEXT_TELEMETRY_DISABLED 1
 
-COPY --from=builder /app/next.config.mjs ./
+COPY --from=builder /app/next.config.js ./
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/package.json ./package.json