0

Okay so maybe this has a fairly simple explanation which I don't know how to look up, but here's my conundrum:

  • if I publish my project (my-navigation) to the npm registry and then npm install it in another project (my-vue-app), it works all great, but!
  • if I try to npm install my-navigation directly from its folder on my machine into my-vue-app, I start getting runtime errors indicating that I have not correctly registered some bootstrap-vue components
  • I have even tried copying the files under node_modules/my-navigation into a folder and then npm installing that - I get the same errors

This is my main entrypoint:

import Vue from "vue";
import MyNavigation from "./MyNav.vue";

import {
  BNavbar,
  BNavbarBrand,
  BNavbarNav,
  BDropdownForm
 } from "bootstrap-vue";

Vue.component("b-navbar", BNavbar);
Vue.component("b-navbar-brand", BNavbarBrand);
Vue.component("b-navbar-nav", BNavbarNav);
Vue.component("b-dropdown-form", BDropdownForm);
Vue.component("b-form-radio", BFormRadio);

import "./styles/bootstrap/mystyles.scss";

export default {
  install(Vue) {
      Vue.component('my-navigation', MyNavigation);
  },
};

export { MyNavigation };

and in package.json:

  "main": "./dist/my-navigation.umd.js",
  "module": "./dist/my-navigation.esm.js",
  "unpkg": "./dist/my-navigation.min.js",

  "files": [
    "dist/*"
  ],
  "dependencies": {
    "core-js": "^3.3.2",
    "vue": "^2.6.10"
  },
  "peerDependencies": {
    "bootstrap-vue": "^2.0.4"
  },
  "scripts": {
    "build-bundle": "vue-cli-service build --target lib --name my-navigation ./src/main-navbar.js"
  },

I can of course work around this by importing the components directly in MyNavigation.vue, but I want to register them globally for use in another component I'll be including in the npm package as well; and well it just seems weird to me that it works through the registry but not locally

Edit: it appears that through the registry, the bootstrap-vue components are being registered globally and are available then in my-vue-app by importing the npm package. This seems like a bad idea(?), so I probably don't want that anyway.

Doug Judy
  • 49
  • 5
  • Try moving bootstrap-vue from `peerDependencies` to `dependencies`. `peerDependencies` assumes that whomever is using your library has installed it instead. – Troy Morehouse Oct 29 '19 at 23:33
  • @TroyMorehouse I tried that (and I also have bootstrap-vue installed in my project) – Doug Judy Oct 30 '19 at 14:04

1 Answers1

0

npm pack produces a .tgz file https://docs.npmjs.com/cli/pack.html

Importing from this file instead of from dist has the same behaviour as importing from a package on the registry.

Still not sure why or what npm does in creating this file, but that answers at least the question of how to mimic the behaviour of a registered package when importing from local/a repository.

Doug Judy
  • 49
  • 5