Switch to "moduleResolution": "NodeNext" in tsconfig.json

.eslintrc.cjs

@@ -1,8 +1,19 @@
+require("@rushstack/eslint-patch/modern-module-resolution.js");
+
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
   extends: [
     "@kachkaev/eslint-config-react",
     "@kachkaev/eslint-config-react/extra-type-checking",
     "plugin:@next/next/recommended",
   ],
   parserOptions: { tsconfigRootDir: __dirname },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        alwaysTryTypes: true,
+        project: `${__dirname}/tsconfig.json`,
+      },
+    },
+  },
 };

next.config.js

@@ -23,6 +23,21 @@ const nextConfig = {
       destination: "/api/jump",
     },
   ],
+
+  webpack: (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        extensionAlias: {
+          /* eslint-disable @typescript-eslint/naming-convention -- external API */
+          ".js": [".js", ".ts"],
+          ".jsx": [".jsx", ".tsx"],
+          /* eslint-enable @typescript-eslint/naming-convention -- external API */
+        },
+      },
+    };
+  },
 };
 
 export default nextConfig;

package.json

@@ -41,12 +41,14 @@
     "@kachkaev/eslint-config-react": "0.6.0",
     "@kachkaev/markdownlint-config": "0.5.0",
     "@next/eslint-plugin-next": "14.0.2",
+    "@rushstack/eslint-patch": "1.5.1",
     "@tsconfig/next": "2.0.1",
     "@tsconfig/strictest": "2.0.2",
     "@types/hosted-git-info": "3.0.5",
     "@types/node": "20.9.0",
     "@types/react": "18.2.37",
     "eslint": "8.53.0",
+    "eslint-import-resolver-typescript": "3.6.1",
     "husky": "8.0.3",
     "lint-staged": "15.1.0",
     "markdownlint-cli": "0.37.0",

pages/404.page.tsx

@@ -1,8 +1,8 @@
 import type { NextPage } from "next";
 import * as React from "react";
 
-import { ErrorPageBody } from "./shared/error-page-body";
-import { PageMetadata } from "./shared/page-metadata";
+import { ErrorPageBody } from "./shared/error-page-body.jsx";
+import { PageMetadata } from "./shared/page-metadata.jsx";
 
 const Page: NextPage = () => {
   const message = "page not found";

pages/_app.page.tsx

@@ -1,9 +1,8 @@
-// eslint-disable-next-line import/no-unresolved -- https://github.com/import-js/eslint-plugin-import/issues/1810
 import { Analytics } from "@vercel/analytics/react";
-import type { AppProps } from "next/app";
+import type { AppProps } from "next/app.js";
 import * as React from "react";
 
-import { PageLayout } from "./_app.page/page-layout";
+import { PageLayout } from "./_app.page/page-layout.jsx";
 
 const App: React.FunctionComponent<AppProps> = ({ Component, pageProps }) => {
   React.useEffect(() => {

pages/_app.page/page-layout.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
-import styled, { createGlobalStyle, css } from "styled-components";
-import normalize from "styled-normalize";
+import _styled, { createGlobalStyle, css } from "styled-components";
+import { normalize } from "styled-normalize";
 
-import { ExternalLink } from "../shared/external-link";
+import { ExternalLink } from "../shared/external-link.jsx";
+
+const styled = _styled as unknown as typeof _styled.default;
 
 const base = css`
   body {

pages/_document.page.tsx

@@ -1,8 +1,10 @@
-import type { DocumentContext } from "next/document";
-import Document, { Head, Html, Main, NextScript } from "next/document";
+import type { DocumentContext } from "next/document.js";
+import _Document, { Head, Html, Main, NextScript } from "next/document.js";
 import * as React from "react";
 import { ServerStyleSheet } from "styled-components";
 
+const Document = _Document as unknown as typeof _Document.default;
+
 export default class MyDocument extends Document {
   static override async getInitialProps(ctx: DocumentContext) {
     const sheet = new ServerStyleSheet();

pages/_error.page.tsx

@@ -1,8 +1,8 @@
 import type { NextPage } from "next";
 import * as React from "react";
 
-import { ErrorPageBody } from "./shared/error-page-body";
-import { PageMetadata } from "./shared/page-metadata";
+import { ErrorPageBody } from "./shared/error-page-body.jsx";
+import { PageMetadata } from "./shared/page-metadata.jsx";
 
 const Page: NextPage<{ statusCode: number }> = ({ statusCode }) => {
   const message = "unknown error";

pages/api/jump.handler.ts

@@ -1,6 +1,6 @@
 import type { NextApiHandler } from "next";
 
-import { resolveDestination } from "../shared/destinations";
+import { resolveDestination } from "../shared/destinations.js";
 
 const handler: NextApiHandler = async (req, res) => {
   let destinationUrl = "/";

pages/index.page.tsx

@@ -1,11 +1,13 @@
 import * as React from "react";
-import styled from "styled-components";
+import _styled from "styled-components";
 
-import { AvailableDestinations } from "./index.page/available-destinations";
-import { Example } from "./index.page/example";
-import { InputForm } from "./index.page/input-form";
-import { ExternalLink } from "./shared/external-link";
-import { PageMetadata } from "./shared/page-metadata";
+import { AvailableDestinations } from "./index.page/available-destinations.jsx";
+import { Example } from "./index.page/example.jsx";
+import { InputForm } from "./index.page/input-form.jsx";
+import { ExternalLink } from "./shared/external-link.jsx";
+import { PageMetadata } from "./shared/page-metadata.jsx";
+
+const styled = _styled as unknown as typeof _styled.default;
 
 const H2 = styled.h2`
   margin-top: 3em;

pages/index.page/available-destinations.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
-import styled from "styled-components";
+import _styled from "styled-components";
 
-import { ExternalLink } from "../shared/external-link";
-import { ClickableCode } from "./clickable-code";
+import { ExternalLink } from "../shared/external-link.jsx";
+import { ClickableCode } from "./clickable-code.jsx";
+
+const styled = _styled as unknown as typeof _styled.default;
 
 const Ul = styled.ul`
   padding-left: 0;

pages/index.page/clickable-code.tsx

@@ -1,4 +1,6 @@
-import styled from "styled-components";
+import _styled from "styled-components";
+
+const styled = _styled as unknown as typeof _styled.default;
 
 export const ClickableCode = styled.code`
   border-bottom: 1px dotted transparent;

pages/index.page/example.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
-import styled from "styled-components";
+import _styled from "styled-components";
 
-import { ExternalLink } from "../shared/external-link";
-import { ClickableCode } from "./clickable-code";
+import { ExternalLink } from "../shared/external-link.jsx";
+import { ClickableCode } from "./clickable-code.jsx";
+
+const styled = _styled as unknown as typeof _styled.default;
 
 const Remark = styled.span`
   white-space: nowrap;

pages/index.page/input-form.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
-import styled from "styled-components";
+import _styled from "styled-components";
+
+const styled = _styled as unknown as typeof _styled.default;
 
 const verticalFormPadding = 20;
 

pages/shared/destinations.ts

@@ -1,7 +1,7 @@
 import hostedGitInfo from "hosted-git-info";
 import { LRUCache } from "lru-cache";
 
-import type { JsonObject } from "./json-types";
+import type { JsonObject } from "./json-types.js";
 
 export interface SuccessfullyResolvedDestination {
   outcome: "success";

pages/shared/error-page-body.tsx

@@ -1,6 +1,9 @@
-import Link from "next/link";
+import _Link from "next/link.js";
 import * as React from "react";
-import styled from "styled-components";
+import _styled from "styled-components";
+
+const Link = _Link as unknown as typeof _Link.default;
+const styled = _styled as unknown as typeof _styled.default;
 
 const Container = styled.div`
   text-align: center;

pages/shared/page-metadata.tsx

@@ -1,6 +1,8 @@
-import Head from "next/head";
+import _Head from "next/head.js";
 import * as React from "react";
 
+const Head = _Head as unknown as typeof _Head.default;
+
 const getBaseUrl = () => {
   const hostname = process.env["NEXT_PUBLIC_VERCEL_URL"] ?? "njt.vercel.app";
   const protocol = hostname.split(":")[0] === "localhost" ? "http" : "https";