fix(clerk-js): Remove ~ui path alias

.changeset/fresh-turkeys-sit.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Resolve type issues when importing `@clerk/clerk-js` directly

packages/clerk-js/src/core/clerk.ts

@@ -56,8 +56,7 @@ import type {
   UserResource,
 } from '@clerk/types';
 
-import type { MountComponentRenderer } from '~ui/Components';
-
+import type { MountComponentRenderer } from '../ui/Components';
 import {
   appendAsQueryParams,
   buildURL,

packages/clerk-js/src/emotion.d.ts

@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-restricted-imports
 import '@emotion/react';
 
-import type { InternalTheme } from '~ui/foundations';
+import type { InternalTheme } from './ui/foundations';
 
 declare module '@emotion/react' {
   export interface Theme extends InternalTheme {}

packages/clerk-js/src/index.browser.ts

@@ -7,7 +7,7 @@ import 'regenerator-runtime/runtime';
 
 import { Clerk } from './core/clerk';
 
-import { mountComponentRenderer } from '~ui/Components';
+import { mountComponentRenderer } from './ui/Components';
 
 Clerk.mountComponentRenderer = mountComponentRenderer;
 

packages/clerk-js/src/index.ts

@@ -1,8 +1,7 @@
 import 'regenerator-runtime/runtime';
 
-import { mountComponentRenderer } from '~ui/Components';
-
 import { Clerk } from './core/clerk';
+import { mountComponentRenderer } from './ui/Components';
 
 export * from './core/resources/Error';
 

packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx

@@ -1,12 +1,11 @@
 import type { ActiveSessionResource } from '@clerk/types';
 
-import type { ThemableCssProp } from '~ui/styledSystem/types';
-
 import type { ElementDescriptor, ElementId } from '../../../ui/customizables/elementDescriptors';
 import type { LocalizationKey } from '../../customizables';
 import { descriptors, Flex, localizationKeys } from '../../customizables';
 import { Action, Actions, PreviewButton, SmallAction, SmallActions, UserPreview } from '../../elements';
 import { Add, CogFilled, SignOut, SwitchArrowRight } from '../../icons';
+import type { ThemableCssProp } from '../../styledSystem';
 
 type SingleSessionActionsProps = {
   handleManageAccountClicked: () => Promise<unknown> | void;

packages/clerk-js/tsconfig.json

@@ -20,10 +20,7 @@
     "useUnknownInCatchVariables": false,
     "declaration": false,
     "jsx": "react-jsx",
-    "jsxImportSource": "@emotion/react",
-    "paths": {
-      "~ui/*": ["./ui/*"]
-    }
+    "jsxImportSource": "@emotion/react"
   },
   "include": [
     "src/index.ts",

packages/clerk-js/webpack.config.js

@@ -31,9 +31,6 @@ const common = ({ mode }) => {
       // Attempt to resolve these extensions in order
       // @see https://webpack.js.org/configuration/resolve/#resolveextensions
       extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
-      alias: {
-        '~ui': './ui',
-      },
     },
     plugins: [
       new webpack.DefinePlugin({