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";