🧩 Plasmo Developers•3mo ago

Adding alias

To introduce a "types" library that is shared between the back end front (extension), I created root/types-lib/ which contains

src/types-matchmaking.ts
tsconfig.json
package.json

src/types-matchmaking.ts
tsconfig.json
package.json

when I tried to configure it in the extension's tsconfig.json, I ended up with

{
  "compilerOptions": {
    "baseUrl": ".",
    "types": ["node", "svelte", "chrome"],
    "module": "None",
    "target": "ESNext",
    "verbatimModuleSyntax": false,
    "esModuleInterop": true,
    "paths": {
      "~*": ["./src/*"],
      "~~*": ["../types-lib/src/*"]
    },
    "resolveJsonModule": true
  },
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.svelte"],
  "references": [
    {
      "path": "../types-lib"
    }
  ]
}

{
  "compilerOptions": {
    "baseUrl": ".",
    "types": ["node", "svelte", "chrome"],
    "module": "None",
    "target": "ESNext",
    "verbatimModuleSyntax": false,
    "esModuleInterop": true,
    "paths": {
      "~*": ["./src/*"],
      "~~*": ["../types-lib/src/*"]
    },
    "resolveJsonModule": true
  },
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.svelte"],
  "references": [
    {
      "path": "../types-lib"
    }
  ]
}

but I end up with

🟡 35     | C:\repositories\extensions\youtube-time-manager\extension\src\PopoverMatchmaking\tabs\preferences\ButtonRelationshipMode.svelte:5:36
🔴 ERROR  | Cannot load file './\~types-matchmaking' in './'.
🔴 ERROR  | Failed to resolve '\~\~types-matchmaking' from './src/PopoverMatchmaking/tabs/preferences/ButtonRelationshipMode.svelte'
🟡 36     | <script lang="ts">
  import IconDating from "data-base64:~assets/icons/dating.svg";
  import IconFriends from "data-base64:~assets/icons/friends.svg";
  import { createEventDispatcher } from "svelte";
  import { RelationshipMode } from "~~types-matchmaking";

  const iconMap = {
    [RelationshipMode.friends]: IconFriends,
    [RelationshipMode.dating]: IconDating
  };

  export let isActive: boolean;
  export let relationshipMode: "dating" | "friends";

  const dispatch = createEventDispatcher();
</script>

<button class="matchmaking-mode-button" class:active={isActive} on:click={() => dispatch("click", relationshipMode)}>
  <img alt={$$slots[0]} src={iconMap[relationshipMode]} />
  <slot />
</button>

<style>
  .matchmaking-mode-button {
    border: none;
    border-radius: 50px;
    padding: 0.4em 0.8em;
    background-color: #dfdfdf;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5em;
  }

  :not(.active) {
    opacity: 0.5;
  }
</style>

🟡 37     | C:\repositories\extensions\youtube-time-manager\extension\src\PopoverMatchmaking\tabs\preferences\ButtonRelationshipMode.svelte:5:36
🔴 ERROR  | Cannot load file './\~types-matchmaking' in './'.

🟡 35     | C:\repositories\extensions\youtube-time-manager\extension\src\PopoverMatchmaking\tabs\preferences\ButtonRelationshipMode.svelte:5:36
🔴 ERROR  | Cannot load file './\~types-matchmaking' in './'.
🔴 ERROR  | Failed to resolve '\~\~types-matchmaking' from './src/PopoverMatchmaking/tabs/preferences/ButtonRelationshipMode.svelte'
🟡 36     | <script lang="ts">
  import IconDating from "data-base64:~assets/icons/dating.svg";
  import IconFriends from "data-base64:~assets/icons/friends.svg";
  import { createEventDispatcher } from "svelte";
  import { RelationshipMode } from "~~types-matchmaking";

  const iconMap = {
    [RelationshipMode.friends]: IconFriends,
    [RelationshipMode.dating]: IconDating
  };

  export let isActive: boolean;
  export let relationshipMode: "dating" | "friends";

  const dispatch = createEventDispatcher();
</script>

<button class="matchmaking-mode-button" class:active={isActive} on:click={() => dispatch("click", relationshipMode)}>
  <img alt={$$slots[0]} src={iconMap[relationshipMode]} />
  <slot />
</button>

<style>
  .matchmaking-mode-button {
    border: none;
    border-radius: 50px;
    padding: 0.4em 0.8em;
    background-color: #dfdfdf;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5em;
  }

  :not(.active) {
    opacity: 0.5;
  }
</style>

🟡 37     | C:\repositories\extensions\youtube-time-manager\extension\src\PopoverMatchmaking\tabs\preferences\ButtonRelationshipMode.svelte:5:36
🔴 ERROR  | Cannot load file './\~types-matchmaking' in './'.

3 Replies

AviOP•3mo ago

When I run a project search:

AviOP•3mo ago

So far the only solution I found is

{
  "compilerOptions": {
    "baseUrl": ".",
    "types": ["node", "svelte", "chrome"],
    "module": "None",
    "target": "ESNext",
    "verbatimModuleSyntax": false,
    "esModuleInterop": true,
    "paths": {
      "~*": ["./src/*"] // removed ~~*
    },
    "resolveJsonModule": true
  },
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.svelte"],
  "references": [
    {
      "path": "../types-lib"
    }
  ]
}

{
  "compilerOptions": {
    "baseUrl": ".",
    "types": ["node", "svelte", "chrome"],
    "module": "None",
    "target": "ESNext",
    "verbatimModuleSyntax": false,
    "esModuleInterop": true,
    "paths": {
      "~*": ["./src/*"] // removed ~~*
    },
    "resolveJsonModule": true
  },
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.svelte"],
  "references": [
    {
      "path": "../types-lib"
    }
  ]
}

<script lang="ts">
  import { RelationshipMode } from "../../../../../types-lib/src/types-matchmaking";
  // ..
</script>

<script lang="ts">
  import { RelationshipMode } from "../../../../../types-lib/src/types-matchmaking";
  // ..
</script>

filthytone•3mo ago

Is there a reason you can’t add it to the search path array for ~* ? Add it after ./src/*

Gaming

Programming

Adding alias