Nuxt: Unexpected token < - javascript

I am working on a nuxt project, and I'm trying to build a map component using google maps and the plugin https://www.npmjs.com/package/vue2-google-maps. I have installed the plugin using npm
In my index.html page I have a normally working page that looks like:
<template>
<div>
<br>
<br>
<Card/>
<br>
<br>
<br>
<br>
<!-- <Googlemap/> -->
<Panel/>
<Four/>
</div>
</template>
<script>
import Panel from '~/components/panel.vue'
import Card from '~/components/detailCard.vue'
// import GoogleMap from '~/components/googleMap.vue'
export default {
components: {
Panel,
Card,
// GoogleMap
}
}
</script>
When I Uncomment the 3 lines with Googlemap in them I get the error in the screenshot .
The Googlemap component is:
<template>
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
#click="center=m.position"
/>
</GmapMap>
</template>
<script>
import Vue from "vue";
import * as VueGoogleMaps from "vue2-google-maps";
Vue.use(VueGoogleMaps, {
load: {
key: "MYTOKEN",
libraries: "places"
}
});
export default {
}
</script>
<style>
</style>
What am I doing wrong?
edit:

Most likely you are missed transpile
https://github.com/xkjyeah/vue-google-maps/blob/0985d475496083f2459db2960ba8f9317aab50ef/README.md#nuxtjs-config
transpile: [/^vue2-google-maps($|\/)/]

Often it refers to the response from a request, where it was expecting a JSON object, but instead is returned HTML. The < refers to the first character in <!DOCTYPE... or similar.
Check the responses coming back from the APIs or other services you’re using.

Updating from Node 12x to Node 14x worked for me

Related

Dynamic src attributes no longer working with require()

Haven't touched Vue in a while, now I'm building a <HeroImage> component in Vue and Vuetify which takes an src attributes, put the image, and combine it a certain way with the slot and other props.
Usually, the answer is wrapping the src string in a request(). But now it throws this message at compile time:
Critical dependency: the request of a dependency is an expression
Here's what I'm trying to do:
<!--
src/views/Home.vue
-->
<template>
<!-- This does not work -->
<HeroImage src="#/assets/hero-image.png" />
<!-- As comparison, this somehow works -->
<img :src="require('#/assets/hero-image.png')" />
</template>
<script>
import HeroImage from "#/components/HeroImage"
export default {
components: { HeroImage }
}
</script>
<!--
src/components/HeroImage.vue
-->
<template>
<img alt="Hero Image" class="align-center justify-center" :src="require(src)" />
</template>
<script>
export default {
name: "HeroImage",
props: {
src: String
}
}
</script>

Vuejs Single-file-component not Rendered in Page

No errors in browser, Webpack compiles successfully, but the "hello from dashboard" doesn't show up in the page.
I'm using Vue v2.6
main.js
import Vue from 'vue'
Vue.component('dashboard', require('#comp/dashboard.vue').default);
const app = require('#/App.vue').default; // this app component works fine
import "./css/app.css"
new Vue({
render: h => h(app) // this app component works fine
}).$mount('#app')
dashboard.vue
<template>
<div>
Hello from dashboard
</div>
</template>
<script>
export default {
name: "dashboard"
}
</script>
index.html
<body>
<div id="app">
<dashboard></dashboard>
</div>
</body>
This is the rendered HTML from the browser, However, "hello from dashboard" is not there :(
<body>
<div id="app">
<dashboard></dashboard>
</div>
</body>
You have the root file "App.vue" mounted in the div id = "app", so the "dashboard" needs to be added to App.vue to see its contents.
// App.vue
<template>
<dashboard />
</template>
<script>
export default {};
</script>
<style scoped></style>
In this code, you have connected a component globally, which will be available in App.vue or another child component
Vue.component('dashboard', require('#comp/dashboard.vue').default);
I assume its the path you are missing so i added a / before comp. Because you stated the App.vue works.
Vue.component('dashboard', require('#/comp/dashboard.vue').default);

React not Loading Local Images

Recently I've been studying React. I'm facing some issues in my code and don't know the reason.
I'm trying to load a local image in my webpage with the following code:
import React from 'react'
import './style.css'
import Card from '../UI/Card'
const BlogPost = (props) => {
return (
<div className="blogPostContainer">
<Card>
<div className="blogHeader">
<span className="blogCategory">Featured</span>
<h1 className="postTitle">Beautiful is Beautiful</h1>
<span className="postedBy">Post on 31 of July, by Victor Arduin</span>
</div>
<div className="postImageContainer">
<img src={require('../../blogPostImages/img1.jpg')} alt="Post Image"/>
</div>
</Card>
</div>
)
}
export default BlogPost
However, when I access the webpage there is no image. When I check the elements of the page I find the following code:
Somehow, it looks like the image is not being loaded to the page. I have checked many questions in the forum, but none of them seems to explain this problem.
I also tried to reinstall few modules as webpack and other dependencies, but the problem still persists. The tree of files of my project are as following:
Thank you for the support!
Try importing the image as
import postImage from "../../blogPostImages/img1.jpg";
Modified code
import React from 'react'
import './style.css'
import Card from '../UI/Card'
import postImage from "../../blogPostImages/img1.jpg"
const BlogPost = (props) => {
return (
<div className="blogPostContainer">
<Card>
<div className="blogHeader">
<span className="blogCategory">Featured</span>
<h1 className="postTitle">Beautiful is Beautiful</h1>
<span className="postedBy">Post on 31 of July, by Victor Arduin</span>
</div>
<div className="postImageContainer">
<img src={postImage} alt="Post Image"/>
</div>
</Card>
</div>
)
}
export default BlogPost
import Img1 from '../../blogPostImages/img1.jpg';
<img src={Img1}/>

Materialize Css Parallex is not a function

I am trying to use the parallax within a react component. I have gotten this to work in the past. This is a MeteorJs project as well
I get a console error:
$(...).parallax is not a function
My component:
import React from 'react';
import $ from 'jquery';
export default class Index extends React.Component{
render(){
$(document).ready(function(){
$('.parallax').parallax();
});
return(
<div className="container">
<div className="parallax-container">
<div className="parallax"><img src="images/parallax1.jpg"/></div>
</div>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background
content or image in this case, is moved at a different speed than the foreground content while
scrolling.</p>
</div>
</div>
<div className="parallax-container">
<div className="parallax"><img src="images/parallax2.jpg"/></div>
</div>
</div>
)
}
}
My client main.js file:
import '../imports/startup/client/routes';
import '../node_modules/materialize-css/dist/js/materialize.min';
import '../node_modules/materialize-css/js/parallax';
The error message is telling you that .parallax() isn't a function in this line of code:
``
$('.parallax').parallax();
```
Which means that $('.parallax') is returning an object (usually a html element). It is not surprising that .parallax() is not a function, because it's just a html element.
Looking at the documentation, I think you are missing this initialisation code:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.parallax');
var instances = M.Parallax.init(elems, options); });

Aurelia dynamic load

Is there a possibility with Aurelia to load a view with his viewmodel dynamically?
For example I have a list of modules, I click one of them and the target view will be loaded in the page. The list is not known a priori, so I can't load all modules.
model example.js
export class Modules{
list = [];
constructor(socket) {
socket.on('update', list => this.list);
}
select(module) {
//load and display the module view
}
}
view example.html
<template>
<ul>
<li repeat.for="module of list" click.delegate="$parent.select(module)">${module.name}</li>
</ul>
<div class="target">
<!-- Here should be loaded the module -->
</div>
</template>
Approach 1
Load the data in your app.js class's configureRouter method. Once the data is loaded you can configure the router. Just be sure to return a promise from configureRouter.
Approach 2
Use Aurelia's <compose> element to compose the selected module with the appropriate view.
Here's a working plunk
And the code:
app.js
import {inject} from 'aurelia-framework';
import {MockSocket} from './mock-socket';
#inject(MockSocket)
export class App {
list;
selectedModule;
constructor(socket) {
socket.on('update', list => this.list = list);
}
select(module) {
this.selectedModule = module;
}
}
app.html
<template>
<ul>
<li repeat.for="module of list">
<button type="button" click.delegate="$parent.select(module)">${module.path}</button>
</li>
</ul>
<div class="target">
<compose view-model.bind="selectedModule.path"></compose>
</div>
</template>

Categories