Failed to resolve import, but the path is valid, and detected as such by VSCode

Question

Here is my code: https://github.com/d0uble-happiness/DiscogsCsvVue

App.vue

<template>
  <div>
    <FileUpload @file="setFile" />
    <ParseCsvToArray v-if="file" :file="file" />
    <ProcessReleaseData />
    <FetchRelease />
    <DownloadCSV />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import FileUpload from './components/FileUpload.vue';
import ParseCsvToArray from './components/ParseCsvToArray.vue';
import ProcessReleaseData from './components/ProcessReleaseData';
import FetchRelease from './components/FetchRelease';
import DownloadCSV from './components/DownloadCSV';

export default defineComponent({
  name: 'App',
  components: {
    FileUpload,
    ParseCsvToArray,
    ProcessReleaseData,
    FetchRelease,
    DownloadCSV
  },
  data() {
    return {
      file: null as null | File,
    }
  },
  methods: {
    setFile(file: File) {
      console.log("Received file:", file)
      this.file = file;
    }
  },
  mounted() {
    console.log("mounted");
  },
});
</script>

<style></style>

processReleaseData.vue

import { type GetReleaseResponse } from '@lionralfs/discogs-client/types/types';

export default  {
  name: 'ProcessReleaseData',
  methods: {
    processReleaseData
  }
}

export function processReleaseData(releaseId: string, data: GetReleaseResponse) {

  const { country = 'Unknown', genres = [], styles = [], year = 'Unknown' } = data;
  const artists = data.artists?.map?.(artist => artist.name);
  const barcode = data.identifiers.filter(id => id.type === 'Barcode').map(barcode => barcode.value);
  const catno = data.labels.map(catno => catno.catno);
  const uniqueCatno = [...new Set(catno)];
  const descriptions = data.formats.map(descriptions => descriptions.descriptions);
  const format = data.formats.map(format => format.name);
  const labels = data.labels.map(label => label.name);
  const uniqueLabels = [...new Set(labels)];
  const qty = data.formats.map(format => format.qty);
  const tracklist = data.tracklist.map(track => track.title);
  // const delimiter = document.getElementById('delimiter').value || '|';
  const delimiter = '|';
  const formattedBarcode = barcode.join(delimiter);
  const formattedCatNo = uniqueCatno.join(delimiter);
  const formattedGenres = genres.join(delimiter);
  const formattedLabels = uniqueLabels.join(delimiter);
  const formattedStyles = styles.join(delimiter);
  const formattedTracklist = tracklist.join(delimiter);
  const preformattedDescriptions = descriptions.toString().replace('"', '""').replace(/,/g, ', ');
  const formattedDescriptions = '"' + preformattedDescriptions + '"';
  const formattedData: any[] = [
    releaseId,
    artists,
    format,
    qty,
    formattedDescriptions,
    formattedLabels,
    formattedCatNo,
    country,
    year,
    formattedGenres,
    formattedStyles,
    formattedBarcode,
    formattedTracklist
  ];

  return formattedData;
}

But for some reason I'm getting this error when I try to run my app:

Internal server error: Failed to resolve import "@lionralfs/discogs-client/types/types" from "src/components/ProcessReleaseData.ts". Does the file exist?

I checked tsconfig.app.json, and it looks fine to me:

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "csv.ts", "src/**/*.ts"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Module "d:/MY DOCUMENTS/CODE/DISCOGS API CLIENT/DiscogsCsvVue/node_modules/@lionralfs/discogs-client/types/types" appears to be valid and is showing up just fine in VsCode. I copied the location from the VSCode pop-up so I don't see any issue there. import { DiscogsClient } from '@lionralfs/discogs-client'; is working just fine in another file in the same directory.

Any tips please? TIA