Importing services in Vue.js - javascript

I have a utils service I wish to use in my Vue component:
import utils from './utils';
export default {
name: 'grid',
props: {
'gridInit': { type: Object, require: true },
'gridDataInit' : { type: Array, required: true }
},
data: function() {
return {
gridData: [],
}
},
created: function(){
this.gridData = utils.transformRawData(this.gridDataInit, this.gridInit.check);
},
}
However, I receive:
[Vue warn]: Error in created hook: "ReferenceError: utils is not defined"
How can I solve the issue? The structuring of my project with utils services is very important to me.

This code says that you have declared utils as you imported. So that was the declaration part. But what about definition? In definition there is main play happening around for which that declared utils is used in code. So I think it creates warning that it is not defined. You should use it via registering like Vue.use(componentname/pluginname). This all should be done in index.js and then should be used in components
Anyhow hope this clears for you!

Related

Error with WEB3js - NodeJs.utils in vite react ts app - How to resolve TypeError: callbackify is not a function

Hey I am playing around with web3 inside react as a client application (using vite react-ts) and trying to call web3.eth.net.getId() but this will throw me an error that callbackify is not a function I digged a little and found an old issue on the github which states that older versions of Nodejs.util (prior version 0.11) didn't have this function. So I checked the package.json where the error occurs (web3-core-requestmanager) it has "util":"^0.12.0", so callbackify should be available.
In fact when I am looking at their imports, they seem to be able to import it:
(following code is ./node_modules\web3-core-requestmanager\src\index.js
const { callbackify } = require('util');
but when they want to use it, callbackify is undefined
//RequestManager.prototype.send function
const callbackRequest = callbackify(this.provider.request.bind(this.provider));
I tried to play around with the dependencies and tried different versions of web3.js (1.7.3; 1.6.0; 1.5.1) all of them had the same util dependency (0.12.0).
My code in all this matter looks like this:
class Blockchain {
public blockchainBaseUrl: string;
public web3;
public provider;
public account: string = '';
public contract: any;
constructor() {
if (process.env.REACT_APP_BLOCKCHAIN_BASE_URL === undefined) {
throw new Error('REACT_APP_BLOCKCHAIN_BASE_URL is not defined');
}
this.provider = window.ethereum;
if (this.provider === undefined) {
throw new Error('MetaMask is not installed');
}
this.setUpInitialAccount();
this.addEthereumEventListener();
this.blockchainBaseUrl = process.env.REACT_APP_BLOCKCHAIN_BASE_URL;
this.web3 = new Web3(Web3.givenProvider || this.blockchainBaseUrl);
this.setContract();
}
async setContract() {
// error comes from the next line
const networkId = await this.web3.eth.net.getId();
this.contract = new this.web3.eth.Contract(
// #ts-ignore
Token.abi,
// #ts-ignore
Token.networks[networkId].address
);
}
}
I also was told that I should simply add a .catch() to web3.eth.net.getId() but this did nothing. Am I doing something wrong or is this a dependency problem? If anyone could point me in the right direction I would really appreciate it. Do I need to expose the util API to the browser somehow? To me, it seems that the API is simply not available.
This is should be the relevant part of my vite.config.ts:
import GlobalsPolyfills from '#esbuild-plugins/node-globals-polyfill';
import NodeModulesPolyfills from '#esbuild-plugins/node-modules-polyfill';
import { defineConfig } from 'vite';
import react from '#vitejs/plugin-react';
export default defineConfig({
plugins: [
react(),
],
optimizeDeps: {
esbuildOptions: {
plugins: [
NodeModulesPolyfills(),
GlobalsPolyfills({
process: true,
buffer: true,
}),
],
define: {
global: 'globalThis',
},
},
},
});
Here is my complete vite config
https://pastebin.com/zvgbNbhQ
Update
By now I think that I understand the issue - it seems that it is a VIte-specific problem and I need to polyfill the NodeJs.util API. I am already doing this (at least I thought). Perhaps someone can provide some guidance on what I am doing wrong with my config?
Update 2
I actually have now the util API inside the browser, but it is still giving me the same error. This is my new config:
https://pastebin.com/mreVbzUW I can even log it out:
Update 3
SO I am still facing this issue - I tried a different approach to polyfill I posted the update to the github issue https://github.com/ChainSafe/web3.js/issues/4992#issuecomment-1117894830
Had similar problem with vue3 + vite + we3
It's started from errors: process in not defined than Buffer is not defined and finally after I configure polyfill I came to callbackify is not defined
Did a lot of researches and finally solved this issue with next trick:
Rollback all polyfill configurations
Add to the head html file
<script>window.global = window;</script>
<script type="module">
import process from "process";
import { Buffer } from "buffer";
import EventEmitter from "events";
window.Buffer = Buffer;
window.process = process;
window.EventEmitter = EventEmitter;
</script>
vite.config.ts
import vue from '#vitejs/plugin-vue'
export default {
resolve: {
alias: {
process: "process/browser",
stream: "stream-browserify",
zlib: "browserify-zlib",
util: 'util'
}
},
plugins: [
vue(),
]
}
add these dependencies browserify-zlib, events, process, stream-browserify, util
Source https://github.com/vitejs/vite/issues/3817#issuecomment-864450199
Hope it will helps you

Inject .js file into VueJS 3 component using provide

Im having a simple import problem in my VueJS 3 app. I have looked at this answer: Vue 3 Composition API Provide/Inject not working in Single File Components but did not find an answer.
I am importing my external file in main.js: import * as myService from "./services/myService.js";
Then also in main.js: app.provide("myService", myService);
And then in my component I have:
<script>
export default {
name: "MyComponent",
props: {
...
},
methods: {
myFunc: function(){
var result = myService.serviceFunction();
}
},
data: function(){
return {
...
}
},
inject: ["myService"]
}
</script>
But where I have var result = myService.serviceFunction(); gives me the error that myService is undefined.
If I call var result = myService.serviceFunction(); in main.js there is no error and the function is called correctly, so the problem must be with the VueJS injection.
What have I done wrong?
You should add this to get access to the injected item :
methods: {
myFunc: function(){
var result = this.myService.serviceFunction();
}
},

In vite + vue3 + TS project, AWS Amplify Failed to resolve components

I am having hard time to make AWS Amplify work with Vite.js
// First I was getting this error:
Uncaught ReferenceError: global is not defined
So, I added this script in index.html's head section
<script>
var global = global || window;
var Buffer = Buffer || [];
var process = process || {
env: { DEBUG: undefined },
version: []
};
</script>
Now, I am getting this warning/error
[Vue warn]: Failed to resolve component: amplify-sign-out
[Vue warn]: Failed to resolve component: amplify-authenticator
You can see complete logs here:
I was able to fix the resolve component errors by creating a vue.config.js file in the app root directory and adding the following:
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
...(options.compilerOptions || {}),
isCustomElement: tag => tag.startsWith('amplify-')
};
return options;
});
}
};
According to AWS Amplify doc, you need to add app.config.isCustomElement = tag => tag.startsWith('amplify-'); to your main.ts file.
Since you're using vite, you can also do so by following the vite example. The vite.config.ts file should be like
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith("amplify-"),
},
},
}),
],
});

How to get all the image files in a directory using vue.js / nuxt.js

I am working on a nuxt.js project and getting error:
In browser I am seeing this error:
__webpack_require__(...).context is not a function
And, in terminal I am getting this error:
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
Here is my code
<script>
export default {
name: 'SectionOurClients',
data() {
return {
imageDir: '../assets/images/clients/',
images: {},
};
},
mounted() {
this.importAll(require.context(this.imageDir, true, /\.png$/));
},
methods: {
importAll(r) {
console.log(r)
},
},
};
</script>
I have used the above script from HERE.
Please help, thanks.
EDIT: After following #MaxSinev's answer, here is how my working code looks:
<template lang="pug">
.row
.col(v-for="client in images")
img(:src="client.pathLong")
</template>
<script>
export default {
name: 'SectionOurClients',
data() {
return {
images: [],
};
},
mounted() {
this.importAll(require.context('../assets/images/clients/', true, /\.png$/));
},
methods: {
importAll(r) {
r.keys().forEach(key => (this.images.push({ pathLong: r(key), pathShort: key })));
},
},
};
</script>
From the webpack docs:
The arguments passed to require.context must be literals!
So I think in your case parsing of require.context failed.
Try to pass literal instead of imageDir variable
mounted() {
this.importAll(require.context('../assets/images/clients/', true, /\.png$/));
},
It is necessary because webpack can not resolve your runtime variable value during bundling.
Solution for vue 3 with vite:
<script setup lang="ts">
const fonts = import.meta.glob('#/assets/fonts/*.otf')
console.log(fonts)
</script>
Read more: https://github.com/vitejs/vite/issues/77

Register custom filters with vue.js

I am using Vue.js with Laravel with Elixir and Browserify. I want to register some custom global filters, each in their own file. I tried to follow the docs, but I can't get it to work. This is the error I get:
Uncaught ReferenceError: Vue is not defined
Any ideas?
Here's my code:
vue/filters/reverse.js
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
vue/app.js
var Vue = require('vue');
Vue.use(require('vue-resource'));
new Vue({
el: 'app',
data: {
test: 'abcde'
},
filters: {
reverse: require './filters/reverse.js'
}
});
View
<h1 v-text="test | reverse"></h1>
If I add this in reverse.js, it still doesn't work
var Vue = require('vue');
And my gulpfile
mix.browserify('app.js');
Try like this in vue/filters/reverse.js
module.exports =(function (value) {
return value.split('').reverse().join('')
})
And then in your app.js
Vue.filter('reverse', require('./filters/reverse'))

Categories