We Keep Coding

How do I get version number from package.json in react [duplicate]

This question already has answers here:
Get version number from package.json in React Redux (create-react-app)
(6 answers)
Closed last month.
I have this plugin version number in package.json file that I am trying to get but I was unable to import package.json. I am getting this error "Module not found: You attempted to import /package.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported."
import React from "react";
import { withTaskContext } from "#twilio/flex-ui";
import "./styles.css";
import TextField from "#material-ui/core/TextField";
import FormControl from "#material-ui/core/FormControl";
import Button from "#material-ui/core/Button";
import PropTypes from "prop-types";
import DropDown from "../style/dropdown";
import packageJson from "/package.json";
class VoiceCallComponent extends React.Component {
...
...
console.logh("version number ", packageJson.version);
}
This is my package.json
{
"name": "plugin-sample",
"version": "1.0.0",
"private": true,
"scripts": {
"postinstall": "flex-plugin pre-script-check"
}
}

I am not sure what you are trying todo.
But maybe this helps you getting the version (using require here)
var packageJson = require('./package.json'); console.log(packageJson.version)
Edit: Does not work for react because of compiling. But I referenced a great working solution in the comments which also does not expose your package.json.

If you're just looking to read the package.json into the project only once. You can use the bundler to define a constant that's automatically replaced with the configured value at compilation. Then you just import the package.json into the bundler's config file.
import package.json into bundler config:
import pkgJSON from "./package.json" // add to vite or webpack config
Vite define: vite.config.js:
export default {
// ...
define: {
"__PACKAGE_JSON_VERSION__": JSON.stringify(pkgJSON.version)
}
// ...
}
Webpack DefinePlugin: webpack.config.js:
new webpack.DefinePlugin({
"__PACKAGE_JSON_VERSION__": JSON.stringify(pkgJSON.version),
})
Then just use the constant in you components:
import React from "react";
import { withTaskContext } from "#twilio/flex-ui";
import "./styles.css";
import TextField from "#material-ui/core/TextField";
import FormControl from "#material-ui/core/FormControl";
import Button from "#material-ui/core/Button";
import PropTypes from "prop-types";
import DropDown from "../style/dropdown";
class VoiceCallComponent extends React.Component {
...
...
console.log("version number ", __PACKAGE_JSON_VERSION__);
}
Hope this helps.

Importing bootstrapVue in vue 3

Hi I was trying to use bootstrapVue in my vue 3 application with typescript here is my main.ts:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'
createApp(App).use(router).use(BootstrapVue).mount('#app')
Causing this error :
src/main.ts:9:32
TS2345: Argument of type 'BootstrapVuePlugin' is not assignable to parameter of type 'Plugin_2'.
Type 'BootstrapVuePlugin' is not assignable to type '{ install: PluginInstallFunction; }'.
Types of property 'install' are incompatible.
Type 'PluginFunction<BvConfigOptions>' is not assignable to type 'PluginInstallFunction'.
Types of parameters 'Vue' and 'app' are incompatible.
Type 'App<any>' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 3 more.
7 |
8 |
> 9 | createApp(App).use(router).use(BootstrapVue).mount('#app')
| ^^^^^^^^^^^^
10 |
Does anyone know a solution to this problem?
Thanks in advance.

The current release of bootstrap-vue (v2.21.2) only supports Vue 2, but there's a GitHub issue tracking Vue 3 support (bootstrap-vue Issue #5196).
In the meantime, there is a third-party version that supports Vue 3:
Install bootstrap and bootstrap-vue-3:
npm i -S bootstrap bootstrap-vue-3
Initialize bootstrap-vue-3 in main.ts:
import { createApp } from 'vue'
import BootstrapVue3 from 'bootstrap-vue-3'
// Since every component imports their Bootstrap functionality,
// the following line is not necessary:
// import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
const app = createApp(App)
app.use(BootstrapVue3)
app.mount('#app')

"Property $notify does not exist on type" - Can't use npm package on Vue App

I am using this npm package to send notifications in my Vue App. After following the instructions, and adding the required usages on the main.ts, I keep getting when I try to use the features of it:
Property '$notify' does not exist on type 'Shop'
main.ts:
import Vue from 'vue'
import Notifications from 'vue-notification'
import App from './App.vue'
Vue.use(Notifications)
new Vue({
render: h => h(App)
}).$mount('#app')
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Character from "./Character.vue";
import Vendor from "./Vendor.vue";
#Component<Shop>({
components: {
Character,
Vendor
},
})
export default class Shop extends Vue {
sellItem(itemID) {
this.$notify({
title: 'Important message',
text: 'Hello user!'
});
}
}
</script>
I have tried importing the component in the .vue file, however it does not recognize the type. What am I doing wrong? I can't find any solution for this...
Thank you.

Add a shim typings file
You need a file that imports and re-exports the type of "Vue", it is named vue-file-import.d.ts, but elsewhere on the internet it is commonly called vue-shim.d.ts. Regardless of name, the content needed is the same:
// vue-file-import.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
Try placing the above file in /src location. But sometimes when you move around changing things it might not work so I suggest you to place it inside /typings location

How to import Library into Vue3 project

could someone help me import a library to my vue3 project so that I can use it in all components?...
I'am trying to import 'moments.js' to my project
Its installed with npm
in my 'main.js' (entry) I import it like:
import { createApp } from "vue"
import App from "./App.vue"
import moment from "moment"
const app = createApp(App)
app.use (moment)
app.mount("#app")
but when I try to console.log(this.moment) from another component I get errors that this.moment is not a function

You can bind moment as a global property on the Vue instance by during the created lifecycle hook in the like manner.
const { createApp } = require('vue');
import App from "./App.vue";
import moment from 'moment';
const MomentPlugin = function (Vue, options) {
Vue.mixin({
created: function () {
this.moment = moment
}
})
}
const app = createApp(App)
app.use(MomentPlugin).mount("#app");
moment function is then available in template context or anywhere the Vue instance is available in scope.

For anyone stumbling onto this post. I changed the code to:
import { createApp } from "vue"
import App from "./App.vue"
import moment from "moment"
const app = createApp(App)
app.provide("moment", moment)
app.mount("#app")
inside other components:
export default {
inject: ["moment"],
// Other code can now use "moment"
}

I would try using this package
https://www.npmjs.com/package/vue-moment
as it is vue-specific. It is a wrapper for moment.
Check the Readme file also for instructions.
https://github.com/brockpetrie/vue-moment
import Vue from 'vue'
import VueMoment from "vue-moment"
Vue.use(VueMoment));
Your case
import { createApp } from "vue"
import App from "./App.vue"
import VueMoment from "vue-moment"
const app = createApp(App)
app.use (VueMoment)
app.mount("#app")

You can use moment like this in any component.
methods: {
moment: function () {
return moment();
}
},

app.use() is for adding Vue plugins to the app. It should be possible to convert Moment.js to a plugin - see "Writing a plugin" in the documentation but it shouldn't be necessary.
You can just import moment.js in any component where you want to use it and the bundling process will make sure that the code is not duplicated anywhere.

Vuetify Uncaught TypeError: Cannot read property 'install' of undefined

While trying to get material icons to load on my Vuetify project (with Webpack and Apollo) I am unable to get my app to display at all.
I followed the installation instructions from Vuetify for webpack, but am getting an error
Uncaught TypeError: Cannot read property 'install' of undefined
at Function.Vue.use (vue.runtime.esm.js?2b0e:5106)
at eval (vuetify.js?402c:12)
at Module../src/plugins/vuetify.js (app.js:1253)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (main.js:15)
at Module../src/main.js (app.js:1241)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at Object.1 (app.js:1338)
Which seems to indicate to me that the issue lies in my src/plugins/vuetify.js with the Vue.use(Vuetify) line. However, I can't determine why Vuetify is unable to be installed(?) because I am importing it in the file.
src/plugins/vuetify.js
import Vue from 'vue'
import {
Vuetify,
VApp,
VCard,
VIcon,
/* other imports ... */
} from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
import '#mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify);
const opts = {
components: {
VApp,
VCard,
VIcon,
/* other imports */
},
icons: {
iconfont: 'mdi', // default - only for display purposes
},
}
export default new Vuetify(opts)
src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import apolloProvider from './vue-apollo'
import store from './store'
import vuetify from '#/plugins/vuetify'
Vue.config.productionTip = false
new Vue({
vuetify,
router,
apolloProvider: apolloProvider,
store,
render: h => h(App)
}).$mount('#app')
As I understand it, Vue.use(Vuetify) in src/plugins/vuetify.js is instructing Vue to install/utilize Vuetify, which is coming from 'vuetify' (which I have confirmed is installed in node_modules). Then options are defined, like specifying icon set and any components that will be used, and then Vuetify is instantiated with those options and passed outwards through export default new Vuetify(opts).
This exported Vuetify is then accessed in main.js by importing it from #/plugins/vuetify. I believe the # is a shortcut for webpack that will tell webpack to resolve the alias to the src folder. Since vuetify is provided as the alias for the import, I then pass it into the Vue instantiation. Does all of that seem right?
Also I have a babel.config.js with very little content, though I don't expect that to be related to my issue.
Now, on to the question of why isn't this working and how do I make it work?

You are importing Vuetify as separate components.
Please try to import Vuetify class directly:
// src/plugins/vuetify.js
import '#mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdi', // default - only for display purposes
},
})
link
And thus, you will import entire Vuetify class with install function set as: Vuetify.install = install;
Also, for optimal bundle size, consider to use treeshaking for Vuetify.
As they say:
"In order to use treeshaking, you must import Vuetify from vuetify/lib."
and
"Treeshaking will only work with Webpack 4 in production mode.
This is automatic when using Vue CLI."