feat(react-email, preview-server): fixed equal versions for both (#2277)

Author: gabrielmfern

.changeset/common-goats-find.md

@@ -0,0 +1,6 @@
+---
+"@react-email/preview-server": patch
+"react-email": patch
+---
+
+Use the same version for the preview-server and react-email

.changeset/config.json

@@ -2,7 +2,7 @@
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
   "changelog": "@changesets/cli/changelog",
   "commit": false,
-  "linked": [],
+  "fixed": [["react-email", "@react-email/preview-server"]],
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",

packages/preview-server/_index.js

@@ -0,0 +1,17 @@
+/**
+ * this file is required so that import.meta.resolve and require.resolve can properly can find the module for this package
+ */
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import url from 'node:url';
+
+const filename = url.fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+const packageJson = JSON.parse(
+  await fs.readFile(path.join(dirname, 'package.json'), 'utf-8'),
+);
+
+/**
+ * @type {string}
+ */
+export const version = packageJson.version;

packages/preview-server/index.mjs

@@ -9,7 +9,7 @@
     "test": "vitest run",
     "test:watch": "vitest"
   },
-  "main": "./_index.js",
+  "main": "./index.mjs",
   "dependencies": {
     "@babel/core": "7.26.10",
     "@babel/parser": "^7.27.0",

packages/preview-server/package.json

@@ -3,6 +3,27 @@ import url from 'node:url';
 import { createJiti } from 'jiti';
 import { addDevDependency } from 'nypm';
 import prompts from 'prompts';
+import { packageJson } from './packageJson.js';
+
+const ensurePreviewServerInstalled = async (
+  message: string,
+): Promise<never> => {
+  const response = await prompts({
+    type: 'confirm',
+    name: 'installPreviewServer',
+    message,
+    initial: true,
+  });
+  if (response.installPreviewServer) {
+    console.log('Installing "@react-email/preview-server"');
+    await addDevDependency(
+      `@react-email/preview-server@${packageJson.version}`,
+    );
+    process.exit(0);
+  } else {
+    process.exit(0);
+  }
+};
 
 export const getPreviewServerLocation = async () => {
   const usersProject = createJiti(process.cwd());
@@ -13,20 +34,18 @@ export const getPreviewServerLocation = async () => {
         .path!,
     );
   } catch (_exception) {
-    const response = await prompts({
-      type: 'confirm',
-      name: 'installPreviewServer',
-      message:
-        'To run the preview server, the pacakge "@react-email/preview-server" must be installed. Would you like to install it?',
-      initial: true,
-    });
-    if (response.installPreviewServer) {
-      console.log('Installing "@react-email/preview-server"');
-      await addDevDependency('@react-email/preview-server');
-      process.exit(0);
-    } else {
-      process.exit(0);
-    }
+    await ensurePreviewServerInstalled(
+      'To run the preview server, the package "@react-email/preview-server" must be installed. Would you like to install it?',
+    );
+  }
+  const { version } = await usersProject.import<{
+    version: string;
+  }>('@react-email/preview-server');
+  if (version !== packageJson.version) {
+    await ensurePreviewServerInstalled(
+      `To run the preview server, the version of "@react-email/preview-server" must match the version of "react-email" (${packageJson.version}). Would you like to install it?`,
+    );
   }
+
   return previewServerLocation;
 };