Add ~ as an import alias

src/js/components/App.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { ErrorRenderer } from "/components/ErrorRenderer";
+import { ErrorRenderer } from "~/components/ErrorRenderer";
-import { ResponseRenderer } from "/components/ResponseRenderer";
+import { ResponseRenderer } from "~/components/ResponseRenderer";
-import { useWebService } from "/hooks/useWebService";
+import { useWebService } from "~/hooks/useWebService";
 
 export function App() {
   const [response, error] = useWebService();

src/js/components/ResponseRenderer.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { TResponse } from "/lib/response";
+import { TResponse } from "~/lib/response";
 
 export function ResponseRenderer({ response }: {response: TResponse}) {
   const t = chrome.i18n.getMessage;

src/js/hooks/useWebService.ts

@@ -1,5 +1,5 @@
-import { TResponse, Response } from "/lib/response";
 import { useEffect, useState } from "react";
+import { TResponse, Response } from "~/lib/response";
 
 type Maybe<T> = T | null;
 

src/js/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { App } from "/components/App";
+import { App } from "~/components/App";
 
 document.addEventListener("DOMContentLoaded", () => {
   const el: HTMLElement = document.getElementById("root")!;

tsconfig.json

@@ -12,6 +12,6 @@
     "lib": [ "ES2020", "DOM" ],
 
     "baseUrl": "src/",
-    "paths": { "*": ["js/*"] },
+    "paths": { "~/*": ["js/*"] },
   }
 }

webpack.config.js

@@ -14,6 +14,7 @@ module.exports = {
     path: path.resolve(__dirname, 'build')
   },
   resolve: {
+    alias: { '~': [path.resolve('src/js/')] },
     roots: [path.resolve('src/js'), path.resolve('node_modules')],
     modules: [path.resolve('src/js'), path.resolve('node_modules')],
     extensions: ['.ts', '.tsx']