diff --git a/packages/next/src/lib/typescript/diagnosticFormatter.ts b/packages/next/src/lib/typescript/diagnosticFormatter.ts
index 2a0e7ad456bc1..7c3ff61948972 100644
--- a/packages/next/src/lib/typescript/diagnosticFormatter.ts
+++ b/packages/next/src/lib/typescript/diagnosticFormatter.ts
@@ -1,4 +1,3 @@
-import { codeFrameColumns } from 'next/dist/compiled/babel/code-frame'
 import chalk from 'next/dist/compiled/chalk'
 import path from 'path'
 
@@ -369,6 +368,7 @@ export function getFormattedDiagnostic(
   message += reason + '\n'
 
   if (!isLayoutOrPageError && diagnostic.file) {
+    const { codeFrameColumns } = require('next/dist/compiled/babel/code-frame')
     const pos = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start!)
     const line = pos.line + 1
     const character = pos.character + 1
diff --git a/packages/next/src/server/lib/router-utils/setup-dev.ts b/packages/next/src/server/lib/router-utils/setup-dev.ts
index 506427a177463..24b8a095d113e 100644
--- a/packages/next/src/server/lib/router-utils/setup-dev.ts
+++ b/packages/next/src/server/lib/router-utils/setup-dev.ts
@@ -10,7 +10,6 @@ import {
 } from '../../../build/swc'
 import type { Socket } from 'net'
 import ws from 'next/dist/compiled/ws'
-import { codeFrameColumns } from 'next/dist/compiled/babel/code-frame'
 
 import fs from 'fs'
 import url from 'url'
@@ -237,6 +236,9 @@ async function startWatcher(opts: SetupOpts) {
           start.column
         }  ${formattedTitle}`
         if (source.source.content) {
+          const {
+            codeFrameColumns,
+          } = require('next/dist/compiled/babel/code-frame')
           message +=
             '\n\n' +
             codeFrameColumns(