enable verbatimModuleSyntax to make type imports/exports explicit (#…

…56551)

This has come up in code review a few times, so enabling the tsconfig setting so it's more easily caught.

.eslintrc.json

@@ -213,6 +213,18 @@
         ],
         "eslint-plugin/require-meta-docs-url": "error"
       }
+    },
+    {
+      "files": ["packages/**/*.tsx", "packages/**/*.ts"],
+      "rules": {
+        "@typescript-eslint/consistent-type-imports": [
+          "error",
+          {
+            "disallowTypeAnnotations": false
+          }
+        ],
+        "@typescript-eslint/no-import-type-side-effects": "error"
+      }
     }
   ],
   "rules": {

packages/create-next-app/create-app.ts

@@ -3,13 +3,13 @@ import retry from 'async-retry'
 import { red, green, cyan } from 'picocolors'
 import fs from 'fs'
 import path from 'path'
+import type { RepoInfo } from './helpers/examples'
 import {
   downloadAndExtractExample,
   downloadAndExtractRepo,
   getRepoInfo,
   existsInRepo,
   hasRepo,
-  RepoInfo,
 } from './helpers/examples'
 import { makeDir } from './helpers/make-dir'
 import { tryGitInit } from './helpers/git'
@@ -19,12 +19,8 @@ import { getOnline } from './helpers/is-online'
 import { isWriteable } from './helpers/is-writeable'
 import type { PackageManager } from './helpers/get-pkg-manager'
 
-import {
-  getTemplateFile,
-  installTemplate,
-  TemplateMode,
-  TemplateType,
-} from './templates'
+import type { TemplateMode, TemplateType } from './templates'
+import { getTemplateFile, installTemplate } from './templates'
 
 export class DownloadError extends Error {}
 

packages/font/src/google/get-proxy-agent.ts

@@ -2,7 +2,7 @@
 import HttpsProxyAgent from 'next/dist/compiled/https-proxy-agent'
 // @ts-ignore
 import HttpProxyAgent from 'next/dist/compiled/http-proxy-agent'
-import { Agent } from 'https'
+import type { Agent } from 'https'
 
 /**
  * If the http(s)_proxy environment variables is set, return a proxy agent.

packages/next-codemod/lib/cra-to-next/global-css-transform.ts

@@ -1,5 +1,5 @@
 import nodePath from 'path'
-import { API, FileInfo, Options } from 'jscodeshift'
+import type { API, FileInfo, Options } from 'jscodeshift'
 
 export const globalCssContext = {
   cssImports: new Set<string>(),

packages/next-codemod/lib/cra-to-next/index-to-component.ts

@@ -1,4 +1,4 @@
-import { API, FileInfo, JSXElement, Options } from 'jscodeshift'
+import type { API, FileInfo, JSXElement, Options } from 'jscodeshift'
 
 export const indexContext = {
   multipleRenderRoots: false,

packages/next-codemod/transforms/add-missing-react-import.ts

@@ -1,4 +1,10 @@
-import { API, Collection, FileInfo, JSCodeshift, Options } from 'jscodeshift'
+import type {
+  API,
+  Collection,
+  FileInfo,
+  JSCodeshift,
+  Options,
+} from 'jscodeshift'
 
 function addReactImport(j: JSCodeshift, root: Collection) {
   // We create an import specifier, this is the value of an import, eg:

packages/next-codemod/transforms/name-default-component.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   API,
   ArrowFunctionExpression,
   ASTPath,

packages/next-codemod/transforms/new-link.ts

@@ -1,4 +1,4 @@
-import { API, FileInfo } from 'jscodeshift'
+import type { API, FileInfo } from 'jscodeshift'
 
 export default function transformer(file: FileInfo, api: API) {
   const j = api.jscodeshift.withParser('tsx')

packages/next/src/build/analysis/get-page-static-info.ts

@@ -4,7 +4,7 @@ import type { Middleware, RouteHas } from '../../lib/load-custom-routes'
 import { promises as fs } from 'fs'
 import LRUCache from 'next/dist/compiled/lru-cache'
 import { matcher } from 'next/dist/compiled/micromatch'
-import { ServerRuntime } from 'next/types'
+import type { ServerRuntime } from 'next/types'
 import {
   extractExportedConstValue,
   UnsupportedValueError,

packages/next/src/build/babel/loader/get-config.ts

@@ -4,7 +4,7 @@ import JSON5 from 'next/dist/compiled/json5'
 import { createConfigItem, loadOptions } from 'next/dist/compiled/babel/core'
 import loadConfig from 'next/dist/compiled/babel/core-lib-config'
 
-import { NextBabelLoaderOptions, NextJsLoaderContext } from './types'
+import type { NextBabelLoaderOptions, NextJsLoaderContext } from './types'
 import { consumeIterator } from './util'
 import * as Log from '../../output/log'
 

packages/next/src/build/babel/loader/index.ts

@@ -1,6 +1,6 @@
-import { Span } from '../../../trace'
+import type { Span } from '../../../trace'
 import transform from './transform'
-import { NextJsLoaderContext } from './types'
+import type { NextJsLoaderContext } from './types'
 
 async function nextBabelLoader(
   this: NextJsLoaderContext,

packages/next/src/build/babel/loader/transform.ts

@@ -11,8 +11,8 @@ import PluginPass from 'next/dist/compiled/babel/core-lib-plugin-pass'
 
 import getConfig from './get-config'
 import { consumeIterator } from './util'
-import { Span } from '../../../trace'
-import { NextJsLoaderContext } from './types'
+import type { Span } from '../../../trace'
+import type { NextJsLoaderContext } from './types'
 
 function getTraversalParams(file: any, pluginPairs: any[]) {
   const passPairs = []

packages/next/src/build/babel/loader/types.d.ts

@@ -1,5 +1,5 @@
-import { webpack } from 'next/dist/compiled/webpack/webpack'
-import { Span } from '../../../trace'
+import type { webpack } from 'next/dist/compiled/webpack/webpack'
+import type { Span } from '../../../trace'
 
 export interface NextJsLoaderContext extends webpack.LoaderContext<{}> {
   currentTraceSpan: Span

packages/next/src/build/babel/plugins/amp-attributes.ts

@@ -1,4 +1,4 @@
-import { NodePath, PluginObj, types } from 'next/dist/compiled/babel/core'
+import type { NodePath, types, PluginObj } from 'next/dist/compiled/babel/core'
 
 export default function AmpAttributePatcher(): PluginObj {
   return {

packages/next/src/build/babel/plugins/commonjs.ts

@@ -1,4 +1,5 @@
-import { NodePath, PluginObj, types } from 'next/dist/compiled/babel/core'
+import type { NodePath, types } from 'next/dist/compiled/babel/core'
+import type { PluginObj } from 'next/dist/compiled/babel/core'
 import commonjsPlugin from 'next/dist/compiled/babel/plugin-transform-modules-commonjs'
 
 // Handle module.exports in user code

packages/next/src/build/babel/plugins/jsx-pragma.ts

@@ -1,8 +1,8 @@
-import {
+import type {
   NodePath,
-  PluginObj,
   types as BabelTypes,
 } from 'next/dist/compiled/babel/core'
+import type { PluginObj } from 'next/dist/compiled/babel/core'
 import jsx from 'next/dist/compiled/babel/plugin-syntax-jsx'
 
 export default function ({

packages/next/src/build/babel/plugins/next-font-unsupported.ts

@@ -1,4 +1,5 @@
-import { NodePath, PluginObj, types } from 'next/dist/compiled/babel/core'
+import type { NodePath, types } from 'next/dist/compiled/babel/core'
+import type { PluginObj } from 'next/dist/compiled/babel/core'
 
 export default function NextPageDisallowReExportAllExports(): PluginObj<any> {
   return {

packages/next/src/build/babel/plugins/next-page-config.ts

@@ -1,11 +1,11 @@
-import {
-  NodePath,
+import { types as BabelTypes } from 'next/dist/compiled/babel/core'
+import type {
   PluginObj,
   PluginPass,
-  types as BabelTypes,
   Visitor,
+  NodePath,
 } from 'next/dist/compiled/babel/core'
-import { PageConfig } from 'next/types'
+import type { PageConfig } from 'next/types'
 import { STRING_LITERAL_DROP_BUNDLE } from '../../../shared/lib/constants'
 
 const CONFIG_KEY = 'config'

packages/next/src/build/babel/plugins/next-page-disallow-re-export-all-exports.ts

@@ -1,4 +1,5 @@
-import { NodePath, PluginObj, types } from 'next/dist/compiled/babel/core'
+import type { NodePath, types } from 'next/dist/compiled/babel/core'
+import type { PluginObj } from 'next/dist/compiled/babel/core'
 
 export default function NextPageDisallowReExportAllExports(): PluginObj<any> {
   return {

packages/next/src/build/babel/plugins/next-ssg-transform.ts

@@ -1,8 +1,8 @@
-import {
+import type {
   NodePath,
-  PluginObj,
   types as BabelTypes,
 } from 'next/dist/compiled/babel/core'
+import type { PluginObj } from 'next/dist/compiled/babel/core'
 import { SERVER_PROPS_SSG_CONFLICT } from '../../../lib/constants'
 import { SERVER_PROPS_ID, STATIC_PROPS_ID } from '../../../shared/lib/constants'
 

packages/next/src/build/babel/plugins/optimize-hook-destructuring.ts

@@ -1,9 +1,8 @@
-import {
+import type {
   NodePath,
-  PluginObj,
   types as BabelTypes,
 } from 'next/dist/compiled/babel/core'
-
+import type { PluginObj } from 'next/dist/compiled/babel/core'
 // matches any hook-like (the default)
 const isHook = /^use[A-Z]/
 

packages/next/src/build/babel/plugins/react-loadable-plugin.ts

@@ -23,11 +23,11 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWAR
 // Modified to put `webpack` and `modules` under `loadableGenerated` to be backwards compatible with next/dynamic which has a `modules` key
 // Modified to support `dynamic(import('something'))` and `dynamic(import('something'), options)
 
-import {
+import type {
   NodePath,
-  PluginObj,
   types as BabelTypes,
 } from 'next/dist/compiled/babel/core'
+import type { PluginObj } from 'next/dist/compiled/babel/core'
 
 import { relative as relativePath } from 'path'
 

packages/next/src/build/babel/preset.ts

@@ -1,4 +1,4 @@
-import { PluginItem } from 'next/dist/compiled/babel/core'
+import type { PluginItem } from 'next/dist/compiled/babel/core'
 import { dirname } from 'path'
 
 const isLoadIntentTest = process.env.NODE_ENV === 'test'

packages/next/src/build/collect-build-traces.ts

@@ -14,7 +14,7 @@ import {
 
 import path from 'path'
 import fs from 'fs/promises'
-import { PageInfo } from './utils'
+import type { PageInfo } from './utils'
 import { loadBindings } from './swc'
 import { nonNullable } from '../lib/non-nullable'
 import * as ciEnvironment from '../telemetry/ci-info'

packages/next/src/build/compiler.ts

@@ -1,5 +1,5 @@
 import { webpack } from 'next/dist/compiled/webpack/webpack'
-import { Span } from '../trace'
+import type { Span } from '../trace'
 
 export type CompilerResult = {
   errors: webpack.StatsError[]

packages/next/src/build/entries.ts

@@ -32,11 +32,11 @@ import {
   CLIENT_STATIC_FILES_RUNTIME_MAIN_APP,
   CLIENT_STATIC_FILES_RUNTIME_POLYFILLS,
   CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH,
-  CompilerNameValues,
   COMPILER_NAMES,
   EDGE_RUNTIME_WEBPACK,
 } from '../shared/lib/constants'
-import { __ApiPreviewProps } from '../server/api-utils'
+import type { CompilerNameValues } from '../shared/lib/constants'
+import type { __ApiPreviewProps } from '../server/api-utils'
 import { warn } from './output/log'
 import {
   isMiddlewareFile,
@@ -46,10 +46,10 @@ import {
 import { getPageStaticInfo } from './analysis/get-page-static-info'
 import { normalizePathSep } from '../shared/lib/page-path/normalize-path-sep'
 import { normalizePagePath } from '../shared/lib/page-path/normalize-page-path'
-import { ServerRuntime } from '../../types'
+import type { ServerRuntime } from '../../types'
 import { normalizeAppPath } from '../shared/lib/router/utils/app-paths'
 import { encodeMatchers } from './webpack/loaders/next-middleware-loader'
-import { EdgeFunctionLoaderOptions } from './webpack/loaders/next-edge-function-loader'
+import type { EdgeFunctionLoaderOptions } from './webpack/loaders/next-edge-function-loader'
 import { isAppRouteRoute } from '../lib/is-app-route-route'
 import { normalizeMetadataRoute } from '../lib/metadata/get-metadata-route'
 import { getRouteLoaderEntry } from './webpack/loaders/next-route-loader'

packages/next/src/build/handle-externals.ts

@@ -1,4 +1,5 @@
-import { WebpackLayerName, WEBPACK_LAYERS } from '../lib/constants'
+import { WEBPACK_LAYERS } from '../lib/constants'
+import type { WebpackLayerName } from '../lib/constants'
 import { defaultOverrides } from '../server/require-hook'
 import { BARREL_OPTIMIZATION_PREFIX } from '../shared/lib/constants'
 import path from '../shared/lib/isomorphic/path'
@@ -9,7 +10,7 @@ import {
   NODE_RESOLVE_OPTIONS,
 } from './webpack-config'
 import { isWebpackAppLayer, isWebpackServerLayer } from './worker'
-import { NextConfigComplete } from '../server/config-shared'
+import type { NextConfigComplete } from '../server/config-shared'
 const reactPackagesRegex = /^(react|react-dom|react-server-dom-webpack)($|\/)/
 
 const pathSeparators = '[/\\\\]'

packages/next/src/build/index.ts

@@ -31,9 +31,11 @@ import {
 import { FileType, fileExists } from '../lib/file-exists'
 import { findPagesDir } from '../lib/find-pages-dir'
 import loadCustomRoutes, {
+  normalizeRouteRegex,
+} from '../lib/load-custom-routes'
+import type {
   CustomRoutes,
   Header,
-  normalizeRouteRegex,
   Redirect,
   Rewrite,
   RouteHas,
@@ -72,9 +74,9 @@ import {
   FUNCTIONS_CONFIG_MANIFEST,
 } from '../shared/lib/constants'
 import { getSortedRoutes, isDynamicRoute } from '../shared/lib/router/utils'
-import { __ApiPreviewProps } from '../server/api-utils'
+import type { __ApiPreviewProps } from '../server/api-utils'
 import loadConfig from '../server/config'
-import { BuildManifest } from '../server/get-page-files'
+import type { BuildManifest } from '../server/get-page-files'
 import { normalizePagePath } from '../shared/lib/page-path/normalize-page-path'
 import { getPagePath } from '../server/require'
 import * as ciEnvironment from '../telemetry/ci-info'
@@ -84,10 +86,10 @@ import {
   eventBuildFeatureUsage,
   eventNextPlugins,
   EVENT_BUILD_FEATURE_USAGE,
-  EventBuildFeatureUsage,
   eventPackageUsedInGetServerSideProps,
   eventBuildCompleted,
 } from '../telemetry/events'
+import type { EventBuildFeatureUsage } from '../telemetry/events'
 import { Telemetry } from '../telemetry/storage'
 import {
   isDynamicMetadataRoute,
@@ -103,17 +105,17 @@ import {
   detectConflictingPaths,
   computeFromManifest,
   getJsPageSizeInKb,
-  PageInfo,
   printCustomRoutes,
   printTreeView,
   copyTracedFiles,
   isReservedPage,
-  AppConfig,
   isAppBuiltinNotFoundPage,
 } from './utils'
+import type { PageInfo, AppConfig } from './utils'
 import { writeBuildId } from './write-build-id'
 import { normalizeLocalePath } from '../shared/lib/i18n/normalize-locale-path'
-import isError, { NextError } from '../lib/is-error'
+import isError from '../lib/is-error'
+import type { NextError } from '../lib/is-error'
 import { isEdgeRuntime } from '../lib/is-edge-runtime'
 import { recursiveCopy } from '../lib/recursive-copy'
 import { recursiveReadDir } from '../lib/recursive-readdir'
@@ -149,7 +151,7 @@ import { buildDataRoute } from '../server/lib/router-utils/build-data-route'
 import { initialize as initializeIncrementalCache } from '../server/lib/incremental-cache-server'
 import { nodeFs } from '../server/lib/node-fs-methods'
 import { collectBuildTraces } from './collect-build-traces'
-import { BuildTraceContext } from './webpack/plugins/next-trace-entrypoints-plugin'
+import type { BuildTraceContext } from './webpack/plugins/next-trace-entrypoints-plugin'
 import { formatManifest } from './manifests/formatter/format-manifest'
 
 interface ExperimentalBypassForInfo {

packages/next/src/build/load-jsconfig.ts

@@ -1,6 +1,6 @@
 import path from 'path'
 import fs from 'fs'
-import { NextConfigComplete } from '../server/config-shared'
+import type { NextConfigComplete } from '../server/config-shared'
 import * as Log from './output/log'
 import { getTypeScriptConfiguration } from '../lib/typescript/getTypeScriptConfiguration'
 import { readFileSync } from 'fs'

packages/next/src/build/output/index.ts

@@ -3,9 +3,11 @@ import stripAnsi from 'next/dist/compiled/strip-ansi'
 import textTable from 'next/dist/compiled/text-table'
 import createStore from 'next/dist/compiled/unistore'
 import formatWebpackMessages from '../../client/dev/error-overlay/format-webpack-messages'
-import { OutputState, store as consoleStore } from './store'
+import { store as consoleStore } from './store'
+import type { OutputState } from './store'
 import type { webpack } from 'next/dist/compiled/webpack/webpack'
-import { CompilerNameValues, COMPILER_NAMES } from '../../shared/lib/constants'
+import { COMPILER_NAMES } from '../../shared/lib/constants'
+import type { CompilerNameValues } from '../../shared/lib/constants'
 
 export function startedDevelopmentServer(appUrl: string, bindAddr: string) {
   consoleStore.setState({ appUrl, bindAddr })