fix: adding video JSON to the Next 15 build + Turbopack warning (#316)

* fix: adding video JSON to the build
fix #315

* fix: add Turbopack warning

package.json

@@ -77,6 +77,7 @@
     "@types/dotenv-flow": "^3.3.3",
     "@types/node": "^20.14.9",
     "@types/react": "18.3.3",
+    "@types/resolve": "^1.20.6",
     "@types/yargs": "^17.0.32",
     "c8": "^9.1.0",
     "esbuild": "^0.21.5",
@@ -99,6 +100,7 @@
     "chalk": "^4.1.2",
     "chokidar": "^3.6.0",
     "magicast": "^0.3.4",
+    "resolve": "^1.22.8",
     "symlink-dir": "^5.2.1",
     "undici": "^5.28.4",
     "yargs": "^17.7.2"

src/cli/lib/json-configs.ts

@@ -1,6 +1,4 @@
 import { readFile } from 'node:fs/promises';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
 
 import { PACKAGE_NAME } from '../../constants.js';
 
@@ -44,11 +42,3 @@ export async function checkPackageJsonForNextVideo(packagePath: string = './pack
 
   return !!(json.devDependencies?.[PACKAGE_NAME] || json.dependencies?.[PACKAGE_NAME]);
 }
-
-export async function getNextVideoVersion() {
-  const scriptDir = path.dirname(fileURLToPath(import.meta.url));
-  const scriptRoot = path.join(scriptDir, '..', '..', '..');
-  const packagePath = path.join(scriptRoot, 'package.json');
-  const pkg = JSON.parse(await readFile(packagePath, 'utf-8'));
-  return pkg.version;
-}

src/cli/sync.ts

@@ -6,11 +6,11 @@ import { cwd } from 'node:process';
 import { readdir } from 'node:fs/promises';
 import path from 'node:path';
 
-import log from '../utils/logger.js';
 import { callHandler } from '../process.js';
 import { createAsset, getAsset } from '../assets.js';
 import { getVideoConfig } from '../config.js';
-import { getNextVideoVersion } from './lib/json-configs.js';
+import { getPackageVersion } from '../utils/utils.js';
+import log from '../utils/logger.js';
 
 export const command = 'sync';
 export const desc =
@@ -56,7 +56,7 @@ function watcher(dir: string) {
 export async function handler(argv: Arguments) {
   const directoryPath = path.join(cwd(), argv.dir as string);
 
-  const version = await getNextVideoVersion();
+  const version = getPackageVersion('next-video');
   log.space(log.label(`▶︎ next-video ${version}`));
   log.space();
 

src/utils/logger.ts

@@ -25,7 +25,7 @@ export function add(...messages: any[]) {
 }
 
 export function warning(...messages: any[]) {
-  base('log', chalk.yellow.bold('!'), ...messages);
+  base('log', chalk.yellow.bold('⚠'), ...messages);
 }
 
 export function error(...messages: any[]) {

src/utils/utils.ts

@@ -1,3 +1,32 @@
+import fs from 'node:fs';
+import resolve from 'resolve';
+
+export function getPackageVersion(packageName: string) {
+  const packageJsonPath = resolvePackageJson(packageName);
+  if (packageJsonPath) {
+    try {
+      const packageJson: { version: string } = JSON.parse(
+        fs.readFileSync(packageJsonPath, { encoding: 'utf-8' }),
+      );
+      return packageJson.version;
+    } catch {
+      // noop
+    }
+  }
+  return undefined;
+}
+
+function resolvePackageJson(packageName: string) {
+  try {
+    return resolve.sync(`${packageName}/package.json`, {
+      basedir: process.cwd(),
+      preserveSymlinks: true,
+    });
+  } catch {
+    return undefined;
+  }
+}
+
 export function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }

src/with-next-video.ts

@@ -1,11 +1,15 @@
 import symlinkDir from 'symlink-dir';
 import { join, dirname } from 'node:path';
-import fs from 'node:fs/promises';
+import fs from 'node:fs';
 import { env } from 'node:process';
 import { fileURLToPath } from 'node:url';
+import logger from './utils/logger.js';
+import { getPackageVersion } from './utils/utils.js';
 import { setVideoConfig } from './config.js';
 import type { VideoConfig } from './config.js';
 
+let hasWarned = false;
+
 export function withNextVideo(nextConfig: any, videoConfig?: VideoConfig) {
   const videoConfigComplete = setVideoConfig(videoConfig);
   const { path, folder, provider } = videoConfigComplete;
@@ -36,19 +40,43 @@ export function withNextVideo(nextConfig: any, videoConfig?: VideoConfig) {
     symlinkDir(VIDEOS_PATH, TMP_PUBLIC_VIDEOS_PATH);
 
     process.on('exit', async () => {
-      await fs.unlink(TMP_PUBLIC_VIDEOS_PATH);
+      fs.unlinkSync(TMP_PUBLIC_VIDEOS_PATH);
     });
   }
 
-  const experimental = { ...nextConfig.experimental };
+  const nextVersion = getPackageVersion('next');
+
+  if (nextVersion && nextVersion.startsWith('15.')) {
+    nextConfig.outputFileTracingIncludes = {
+      ...nextConfig.outputFileTracingIncludes,
+      [path]: [`./${folder}/**/*.json`],
+    };
+  } else {
+    const experimental = { ...nextConfig.experimental };
+    experimental.outputFileTracingIncludes = {
+      ...experimental.outputFileTracingIncludes,
+      [path]: [`./${folder}/**/*.json`],
+    };
+    nextConfig.experimental = experimental;
+  }
+
+  if (!hasWarned && process.env.TURBOPACK && !process.env.NEXT_VIDEO_SUPPRESS_TURBOPACK_WARNING) {
+    hasWarned = true;
 
-  experimental.outputFileTracingIncludes = {
-    ...experimental.outputFileTracingIncludes,
-    [path]: [`./${folder}/**/*.json`],
-  };
+    const nextVideoVersion = getPackageVersion('next-video');
+
+    logger.space(logger.label(`▶︎ next-video ${nextVideoVersion}\n`));
+    logger.warning(
+      `You are using next-video with \`next ${
+        process.env.NODE_ENV === 'development' ? 'dev' : 'build'
+      } --turbo\`. next-video doesn't yet fully support Turbopack.\n  We recommend temporarily removing the \`--turbo\` flag for use with next-video.\n`
+    );
+    logger.warning(
+      `Follow this issue for progress on next-video + Turbopack: https://github.com/muxinc/next-video/issues/266.\n  (You can suppress this warning by setting NEXT_VIDEO_SUPPRESS_TURBOPACK_WARNING=1 as environment variable)\n`
+    );
+  }
 
   return Object.assign({}, nextConfig, {
-    experimental,
     webpack(config: any, options: any) {
       if (!options.defaultLoaders) {
         throw new Error(