Problem with using axios in laravel project - javascript

I'm using axios to make a live laravel project and get this error: Uncaught ReferenceError: axios is not defined.
I already have run the npm install axios --save command even though laravel already comes with axios installed.
I imported app.js in my view component like this:
<script src="{{ asset('js/app.js') }}"></script>
<script>
(function() {
const options = document.querySelectorAll('.quantity')
Array.from(options).forEach(function(element) {
element.addEventListener('change', function() {
const id = element.getAttribute('data-id')
axios.patch(`/cart/${id}`, {
quantity: this.value
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
})
});
})();
I believe the first script tag is causing the issue because I get this error in the console:
GET http://127.0.0.1:8000/js/app.js net::ERR_ABORTED 404 (Not Found)
However, I don't know how to link to app.js file properly.
EDIT: the issue was solved after I ran npm install npm install vite npm run dev and added this line to my view file up in the head tag:
#vite(['resources/css/app.css', 'resources/js/app.js'])

Related

I am getting `userCoins.get is not a function` error when `anchor-earn` tries to get the balance of a wallet

When using AnchorEarn from the #anchor-protocol/anchor-earn module to get a balance
import { AnchorEarn } from '#anchor-protocol/anchor-earn'
const userBalance = await anchorEarn.balance({
currencies: [DENOMS.UST],
});
I am getting the following error:
userCoins.get is not a function
I am using the following script to install it npm i #anchor-protocol/anchor-earn and I am following the sample script in Anchor's website, any idea of what could be happening here?
Use the following line to install anchor-earn:
npm install -S #anchor-protocol/anchor-earn#2.0.0-alpha1

Display data on the browser console with vue-axios

I have a .json file which I need to display its data on the browser console. I'm working with Vue.js and using vue-axios to fetch data from the .json file.
Here is the code I have on the script tag to do so:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
import countries from "./charts/countries.vue";
import axios from "axios";
//const http = axios.create();
export default {
components: {
countries
//languagues
},
mounted() {
axios
.get("./MOCK_DATA.json")
.then(Response => window.console.log(Response.data));
}
};
</script>
I've tried axios.get(...) and I've also tried setting a variable http, which is commented above "export default" and using it, instead of "axios.get(...)". I keep getting these same errors on the browser console:
Failed to load resource: the server responded with a status of 404 (Not Found) :8080/MOCK_DATA.json:1
createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 404
at createError (createError.js?2d83:16)
at settle (settle.js?467f:17)
at XMLHttpRequest.handleLoad (xhr.js?b50d:61)
P.S.: The file in which I'm working is App.vue and it's on the "src" folder as well as the "MOCK_DATA.json" file which leads me to believe it's not a path error.
You just need to move your file to public dir, where index.html is and do this request:
axios
.get("/MOCK_DATA.json") //Without dot
.then(Response => window.console.log(Response.data));
It's because Vue dev server looks for files in those dir.

File not found in script

I've installed several libraries using NPM.
You have to load the file to use it there.All installed libraries are under the node_modules
The designation is like this.
<script src="../node_modules/vue/dist/vue.js"></script>
I'm sure it's on the server, I'm sure the URL of the script tag is correct
And I get the following error in the script, even though it is specified like this
login.html:45 GET https://***/node_modules/vue/dist/vue.js net::ERR_ABORTED 404
The JS file I prepared separately is loaded, but the original vue.js is not, so an error is coming back.
That's what we're trying to do with VUE.
I'm going to use Ajax to create an SPA
/* eslint-disable no-console */
const vue = require("vue"); //I added it, but it's still not working.
const axios = require("axios"); //I added it, but it's still not working.
var app = new Vue({
el: "#app",
data: {
url: "https://*****",
user: "",
password: "",
res: ""
},
methods: {
login: function () {
axios.post(this.url, {
user: this.user,
password: this.password
})
.then(function (response) {
this.res = response.data.d;
if (this.res === true) {
//true
} else {
//failed
}
})
.catch(function (error) {
alert('System error');
});
}
}
})
This is how usually use it from node_module
import Vue from 'vue'; // this will check inside node_modules for the file and include
Instead of loading the files through a script tag, use require() in your javascript. For example:
const express = require("express");
const vue = require("vue");
This will work on both the client and on the server.
Why not use a CDN?
This way, the browser will not have to download the Vue file from your server if it has already been cached. Also, you may be able to use the vue.min.js file which will load even faster than the normal Vue dist file...
For example, here is a script from cdnjs.com you could try:
<script
src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"
integrity="sha256-ngFW3UnAN0Tnm76mDuu7uUtYEcG3G5H1+zioJw3t+68="
crossorigin="anonymous"></script>
Try replacing your script tag with this.

PubSub-js cannot access functions

I am fairly new to using PubSubJS (along with jQuery, Webpack, React) in a project, and my local server throws the following error
Uncaught TypeError: _pubsubJs2.default.subscribe is not a function
at Object.componentDidMount (SideNavContainer.js?eb9e:44)
...
this line
import PubSub from 'pubsub-js';
...
PubSub.subscribe(OPEN_LAYERS, (_, isOpen) => {
this.setState({ active: isOpen });
this.props.isOpen(isOpen);
});
I've successfully run PubSubJS in a blank test project, and so maybe there's an issue with how Webpack is building? My webpack.config.js file compiles using babel. I'll include more source code if need be!

Vueify + Elixir + Hotloading - Uncaught TypeError: Cannot read property 'indexOf' of undefined

I've set up Elixir to use Vueify with hot reload plugin. Everything compiles ok but I get a console error on my compiled file and the Vue component doesn't appear to be transforming to html, it still shows the <app></app> tags. If I remove the hot reload plugin from elixir, the page renders fine.
The error is:
Uncaught TypeError: Cannot read property 'indexOf' of undefined
The console output it
[HMR] Attempting websocket connection to http://localhost:3123
app.js:10904 Uncaught TypeError: Cannot read property 'indexOf' of undefined
[vue-devtools] Ready. Detected Vue v1.0.26
[HMR] Websocket connection successful.
[HMR] Updated modules ["resources/assets/js/embeds/html/app.vue"]
So it's worth mentioning that it is receiving messages from hot reloading, it just doesn't render the page because of this error. The error is happening on the following lines in the compiled app.js file.
// compat with < 2.0.0-alpha.7
if (Vue.config._lifecycleHooks.indexOf('init') > -1) {
initHookName = 'init'
}
Here are my files
gulpfile.js
var elixir = require('laravel-elixir');
var gutil = require('gulp-util');
require('laravel-elixir-vueify');
if (gutil.env._.indexOf('watch') > -1) {
// Add the browserify HMR plugin
elixir.config.js.browserify.plugins.push({
name: 'browserify-hmr',
options: {}
})
}
elixir(function (mix) {
mix.browserify('embeds/html/main.js', 'public/js/embeds/html/app.js');
});
main.js
var Vue = require('vue')
var App = require('./app.vue')
new Vue({
el: 'body',
components: {
app: App
},
created: function() {
console.log('test');
}
})
app.vue
<style>
</style>
<template>
<div id="player-wrapper">
{{ msg }}
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
index.blade.php
<body>
<app></app>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
It might be a version compatibility problem, between Vue, and Vue-hot-reload-api.
As an example, vueify#8.7.0 currently depends on vue-hot-reload-api#1.3.2, which only seems to be compatible with Vue#1.x.
From personal experience, this specific error occurred to me, when using vue-hot-reload-api#2.x with vue#1.x, although i have not tested it the other way around.
A note a the very top of Vue-hot-reload-api's Github readme, also seems to verify this problem.
In my case, i just reinstalled the vue#1.0.26-compatible version of vue-hot-reload-api, as following:
npm install --save-dev vue-hot-reload-api#^1.3.2
So have a look at the versions of your dependencies.

Categories