briancbarrow / vue-component-library-2023

28 stars 9 forks source link

The following dependencies are imported but could not be resolved: `brian-component-lib` #6

Open jcoliz opened 2 months ago

jcoliz commented 2 months ago

Overview

Trying to clone and integrate into a sample project, but npm won't find the dependency. Anyone have any ideas?

Steps

1. Clone this repo

git clone https://github.com/briancbarrow/vue-component-library-2023.git briancbarrow/vue-component-library-2023

2. Apply PR #4

Added line as shown in PR

3. Install & Build

cd briancbarrow/vue-component-library-2023
npm install
npm build

4. Create a new TS-based vue project

npm create vue@latest

5. Update package.json, and add to a component, per blog post

diff --git a/package.json b/package.json
index 2d41901..bcf8970 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
-    "vue": "^3.4.29"
+    "vue": "^3.4.29",
+    "brian-component-lib": "file:../../briancbarrow/vue-component-library-2023/dist"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",
diff --git a/src/App.vue b/src/App.vue
index d05208d..2f67fca 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
 import TheWelcome from './components/TheWelcome.vue'
+import { FccButton } from "brian-component-lib"
+import "brian-component-lib/style.css"
 </script>

 <template>
   <header>
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

+    <FccButton text="FccButton"/>
+
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
     </div>

6. Run dev server

npm run dev

Result

Error: The following dependencies are imported but could not be resolved:

  brian-component-lib/style.css (imported by C:/Source/jcoliz/vue-test-lib-host/src/App.vue?id=0)
  brian-component-lib (imported by C:/Source/jcoliz/vue-test-lib-host/src/App.vue?id=0)

Are they installed?

node_modules looks good:

    Directory: C:\Source\jcoliz\vue-test-lib-host\node_modules\brian-component-lib

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----         8/25/2024  12:54 PM                components
-a----         8/25/2024  12:54 PM            492 brian-component-lib.js
-a----         8/25/2024  12:54 PM            641 brian-component-lib.umd.cjs
-a----         8/25/2024  12:54 PM             74 index.d.ts
-a----         8/25/2024  12:54 PM            547 style.css
-a----         8/25/2024  12:21 PM           1497 vite.svg