i am using laravel + vuejs to do the follow and unfollow button of instagram clone , but i get this error i did everything i could, checked the config.js , deleted the module package and again run the npm install but it didnt work here is my code
<template>
<div>
<button class="btn btn-primary ml-4" #click="followUser" v-text="buttonText">Folloq</button>
</div>
</template>
<script>
import func from '../../../vue-temp/vue-editor-bridge';
export default {
props: ['userId', 'follows'],
watch: {
status: function() {
this.buttonText = (this.status) ? 'Unfollow' : 'Follow';
}
},
data: function () {
return {
status: this.follows,
buttonText: this.follows ? 'Unfollow' : 'Follow'
}
},
methods: {
followUser() {
axios.post('/follow/' + this.userId)
.then(response => {
this.status = ! this.status;
console.log(response.data);
})
.catch(errors => {
if (errors.response.status == 401){
window.location = '/login';
}
});
}
},
}
</script>
my code in the view in index.blade.php for the button is
<follow-button user-id="{{$user->id}}" follows="{{ $follows }}"></follow-button>
route is
Route::post('follow/{user}','App\Http\Controllers\FollowsController#store');
full error
ERROR in ./resources/js/components/FollowButton.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/FollowButton.vue?vue&type=script&lang=js&) 7:0-55
Module not found: Error: Can't resolve '../../../vue-temp/vue-editor-bridge' in 'D:\laravel projects\codeGram\resources\js\components'
I assume you don't want to use this at all:
import func from '../../../vue-temp/vue-editor-bridge';
Vscode imports this 'func' from a module when you want to autocomplete while writing function. This is totally annoying and if anybody knows how to turn it off, you would be my personal hero!
VS Code automatically added in your code line like:
import func from 'vue-editor-bridge'
Find it in your code and remove it. Done!
I faced this problem too, and it happens because, instead of typing complete function in the code, I used the autocomplete version of function which was func and as func is a totally different thing in Vue, as compared to function, Vue just put import func from 'vue-editor-bridge'.
Just change the word func to function and remove this import inside the script tag and it will be ok.
That's how it works for me.
If you are in vue and your error starts like this 'Module not found: Error: Can't resolve 'http' ...' installing url-loader will do the trick. Just install it using npm.
npm install --save-dev url-loader
Related
I followed https://docs.meteor.com/packages/dynamic-import.html to set up dynamic imports, and it works fine on localhost.
For context, I am creating a blog (Meteor/React/Apollo) which renders MDX files, and these files need to be imported, so I have a list of all my posts as such:
import("./imports/posts/61a000d03a1931b8819dc17e.mdx")
import("./imports/posts/619cae2f03f4ff710aa3d980.mdx")
import("./imports/posts/619e002d386ebf2023ea85c3.mdx")
import("./imports/posts/619fff7c5b312d7622acda86.mdx")
I have a Post.jsx component:
import React, { useState, useRef } from "react"
import { useHistory, useParams } from "react-router-dom"
import { useQuery } from "#apollo/client"
import { GET_POST_ID } from "../../api/posts/queries"
const Post = () => {
const Post = useRef()
const history = useHistory()
const { slug } = useParams()
const [loadedPost, setLoaded] = useState(false)
const [viewer, showViewer] = useState(false)
const open = () => showViewer(true)
const { data, loading, error } = useQuery(GET_POST_ID, { variables: { slug }})
if (loading) return null
if (error) {
console.log(error)
return null
}
import(`./posts/${data._id}.mdx`).then(MDX => {
Post.current = MDX.default
setLoaded(true)
}, (err) => {
console.log(err)
})
return loadedPost ? (
<>
<div className="postContent">
<div className="markdownOverride markdown-body">
<Post.current />
</div>
</div>
</>
) : null
}
export default Post
This works well and good on my local network. However, if I attempt to access it from outside my local network, an error is thrown in the console that all the blog modules are not found. The Apollo/GraphQL portion works fine, but the actual module can't be imported.
How do I get this to work outside of localhost?
Thanks.
EDIT: The error messages are, for each post:
Uncaught (in promise) Error: Cannot find module '/imports/posts/61a000d03a1931b8819dc17e.mdx`
And when I load the actual post page:
Uncaught (in promise) TypeError: Failed to fetch
Isn't your error thrown by console.log(err) ?
import(`./posts/${data._id}.mdx`).then(MDX => {
Post.current = MDX.default
setLoaded(true)
}, (err) => {
console.log(err) // <---- here
})
This means your path isn't right for /imports/posts/61a000d03a1931b8819dc17e.mdx.
To me you can't use changing parameters when doing dynamic imports.
./posts/${data._id}.mdx, because your meteor or webpack compilation needs to treat all the data._ids avalaible in your database in order to compile and prepare the file...
This might be why it works in development mode but not in production.
You can just do dynamic imports of modules or components (already compiled), no more to me. Take a look at your output compilation bundles, and try to find where are your components...
It turns out that I needed to specify the ROOT_URL correctly when initializing Meteor. With an ngrok http tunnel on port 3000 pointing to https://some-hash.ngrok.io, I had to start Meteor with: ROOT_URL="https://some-hash.ngrok.io" meteor. When I do this, I can access it fine and everything loads from my local IP and the ngrok URL, but I can't seem to load it up from localhost (it times out).
Specifying my local or public IP did not work, I could not get it to load through any of those methods.
This question already has answers here:
Webpack 5 Receiving a Polyfill Error?!?! My JavaScript React project is receiving a polyfill error while trying to compile my webpack.config.js file
(3 answers)
Closed 10 months ago.
I can't seem figure out what's causing the following issue when using axios:
ERROR in ./node_modules/axios/lib/adapters/xhr.js 17:10-24
Module not found: Error: Can't resolve 'url' in 'C:\Users...
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "url": false }
webpack compiled with 1 error
So, I am using axios when a user submits a value via input field; It triggers the following function posting the data and retrieving the values from the backend based on the posted data.
import React, {useState } from 'react'
import axios from 'axios';
import {TextField } from "#mui/material";
function Model () {
const [input,setInput] = useState ('');
const keyPress = (e) => {
if(e.keyCode === 13 || e.key === 'Enter' ){
e.preventDefault();
setInput(e.target.value)
const data = e.target.value
axios.post('http://localhost:5000/Data',data)
.then( res => {
console.log(res)
}).catch((err) => {
console.log("Message is not set maybe bc of :",err);
})
}
}
// render() {
return (
<>
<div className='container'>
<div id='serachBoxConatiner'>
<TextField fullWidth label="Enter here..." id="fullWidth"
onChange={input}
onKeyPress={keyPress}
/>
</div>
</div>
</>
);
}
export default Model
I have tried to delete and reinstall axios, I tried to us npm install to see if I that would help but nothing worked so far.
Since e.target.value is going to be a string, you can't post that as an axios request payload. You need to send json objects as exampled here. Can you try something like this (depending on what is the keyword for your endpoint):
axios.post('http://localhost:5000/Data',{
search: data
})
.then( res => {
console.log(res)
}).catch((err) => {
console.log("Message is not set maybe bc of :",err);
})
Remember search is not necessary, it can be any name based on your endpoint
I’ve been piecing together a few different tutorials to try and get Mocha tests working for Laravel 7 Vue Components.
I can successfully run a basic test
expect(0).toBe(0);
But as soon as I try and mount a component I get the following error
TypeError: _vm._ssrEscape is not a function
at Proxy.render (public/main.js:154:13)
at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.dev.js:3538:22)
at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4054:21)
at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
at VueComponent.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8392:10)
at init (node_modules/vue/dist/vue.runtime.common.dev.js:3112:13)
at createComponent (node_modules/vue/dist/vue.runtime.common.dev.js:5958:9)
at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:5905:9)
at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:6455:7)
at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3933:19)
at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4054:10)
at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4465:25)
at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4454:12)
at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4061:3)
I’m running Node 12.18.2.
My test file contains
import { mount } from '#vue/test-utils';
import Counter from '../../resources/js/components/Counter';
describe ('Counter', () => {
it ('defaults to a count of 0', () => {
const wrapper = mount(Counter);
});
});
And my component contains
<template>
<div>
<span class="count" v-text="count"></span>
<button #click="count++"></button>
</div>
</template>
<script>
export default {
name: "Counter",
data () {
return {
count: 0
};
}
}
</script>
The test command is
mochapack --webpack-config node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/**/*.spec.js
And the setup.js file contains
require('jsdom-global')()
global.expect = require('expect');
Thanks for any help
I’ve got this working now.
Using parts of this https://dev.to/tuandm/how-to-test-vue-components-with-laravel-mix-and-mocha-3kgc/
Rather than install mcocha-webpack then uninstalling I went straight to installing mochapack
npm install --save-dev webpack vue-template-compiler #vue/test-utils mocha mochapack jsdom jsdom-global expect
I want to download an excel file on response:
this what I did :
download(type: string) {
this.http.get(`download_template?template=${type}`).subscribe(data => {});
}
and this is what I got :
Have done something similar... This is my approach below and it works.
Install npm i --save file-saver
Service
download(type: string) {
return this.http.get(`download_template?template=${type}`, {responseType: 'blob'});
}
Component
...
import { saveAs } from 'file-saver';
...
this._service.download(type: string).subscribe(res => {
saveAs(res, 'YourFileName.xlsx',
{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
}}
In your backend make an endpoint which returns the file you wanted when requesting.
In your front end use in this way
<a [href]=URLoftheFile download="FilenameWithExtension">DownloadFile</a>
I found npm module google-maps-api and installed it (npm install google-maps-api) but I can't figure out how to import it with systemjs/jspm (jspm cannot find this module). Here's the configuration from my config.js:
"paths": {
"*": "app/dist/*.js",
"github:*": "app/jspm_packages/github/*.js",
"npm:*": "app/jspm_packages/npm/*.js" }
So, when I try do something like this:
import {mapsapi} from 'google-maps-api';
I get the following error in browser console:
GET https://localhost:44308/app/dist/google-maps-api.js 404 (Not Found)
Looking at the filesystem I see that npm installed the module under app/node_modules/google-maps-api so how do I reference it in the import clause from Aurelia module?
I found a solution and answering my own question here:
I finally figured how to install it with jspm, so you just need to give a hint to jspm to install it from npm like so:
jspm install npm:google-maps-api
After jspm completes installation, import (no {} syntax) works fine:
import mapsapi from 'google-maps-api';
then I inject it in constructor and instantiate geocoder api:
#inject(mapsapi('InsertYourGMAPIKeyHere'))
export class MyClass {
constructor(mapsapi) {
let that = this;
let maps = mapsapi.then( function(maps) {
that.maps = maps;
that.geocoder = new google.maps.Geocoder();
});
...
}
In order to create map on a div I use EventAggregator to subscribe for router:navigation:complete event and use setTimeout to schedule map creation:
this.eventAggregator.subscribe('router:navigation:complete', function (e) {
if (e.instruction.fragment === "/yourRouteHere") {
setTimeout(function() {
that.map = new google.maps.Map(document.getElementById('map-div'),
{
center: new google.maps.LatLng(38.8977, -77.0366),
zoom: 15
});
}, 200);
}
});
Here's a complete view-model example that uses attached() to link to your view.
import {inject} from 'aurelia-framework';
import mapsapi from 'google-maps-api';
#inject(mapsapi('your map key here'))
export class MapClass {
constructor(mapsAPI) {
this.mapLoadingPromise = mapsAPI.then(maps => {
this.maps = maps;
});
}
attached() {
this.mapLoadingPromise.then(() => {
var startCoords = {
lat: 0,
long: 0
};
new this.maps.Map(document.getElementById('map-div'), {
center: new this.maps.LatLng(startCoords.lat, startCoords.long),
zoom: 15
});
});
}
}
For everyone using Typescript and getting "Cannot find module 'google-maps-api'" error,
you need to add typings to the solution. Something like this works
declare module 'google-maps-api' {
function mapsapi(apikey: string, libraries?, onComplete?);
namespace mapsapi {
}
export = mapsapi;
}
and then import it like this
import * as mapsapi from 'google-maps-api';