I'm currently trying to use amcharts 5 in a Nuxt3 app, and had a couple of graphs working fine. However at some point amcharts has randomly stopped working and I get the following error:
[h3] [unhandled] H3Error: am5 is not defined
at createError (file:///home/johnr/Code/UrbanTide/socialconnect_ukpn/node_modules/h3/dist/index.mjs:196:15)
at Server.nodeHandler (file:///home/johnr/Code/UrbanTide/socialconnect_ukpn/node_modules/h3/dist/index.mjs:386:21) {
statusCode: 500,
fatal: false,
unhandled: true,
statusMessage: 'Internal Server Error'
}
I tried using amcharts5 according to the docs by importing it and using it in lifecycle hooks.
And initially had an issue related to ESM modules which was resolved by adding "type" : "module" to package.json. After that I made a couple of graphs and they worked fine. However shortly after writing a third graph I changed the ssr setting in nuxt.config.js to false and shortly after got the above error.
I've tried adding amcharts to the transpile array in the nuxt.config.ts:
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
publicRuntimeConfig: {
VUE_APP_AUTH_COOKIE: process.env.VUE_APP_AUTH_COOKIE,
VUE_APP_ENV: process.env.VUE_APP_ENV,
VUE_APP_SESSION_HASH: process.env.VUE_APP_SESSION_HASH,
VUE_APP_USMART_ORIGIN: process.env.VUE_APP_USMART_ORIGIN,
MAP_BOX_ACCESS_TOKEN: process.env.MAP_BOX_ACCESS_TOKEN
},
css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'],
build: {
transpile: ["vuetify", "#amcharts/amcharts5"]
},
vite: {
define: {
"process.env.DEBUG": false
}
},
buildModules: [
// ...
'#pinia/nuxt',
],
})
but didn't have any joy.
I have also tried setting up a plugin:
plugins/amCharts.client.ts
import * as am5 from "#amcharts/amcharts5";
import * as am5xy from "#amcharts/amcharts5/xy";
import * as am5radar from "#amcharts/amcharts5/radar";
import am5themes_Animated from "#amcharts/amcharts5/themes/Animated";
export default defineNuxtPlugin(() => {
return {
provide: {
am5: am5,
am5xy: am5xy,
am5radar: am5radar,
am5themes_Animated: am5themes_Animated,
}
}
})
and I'm retrieving it in the component like so:
const { $am5, $am5radar, $am5themes_Animated, $am5xy } = useNuxtApp()
The issue was a solved by removing a remaining piece of code calling the am5 instance as explained here.
Happens to anybody!
I'm going through the motions of upgrading a Meteor 1.2 app to 1.3.5.1 and have a large number of console warnings saying something like:
Warning: You are manually calling a React.PropTypes validation function for the direction prop on MosoTabsScroll. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://facebook.github.io/react/warnings/dont-call-proptypes.html for details.
I've read the link, and can't see how it applies to my code, which is pretty straightforward and worked perfectly in Meteor 1.2. For example, here is one of the React classes that is generating warnings:
import React from 'react';
MosoTabsScroll = React.createClass({
propTypes: {
direction: React.PropTypes.string,
active: React.PropTypes.bool
},
getDefaultProps() {
return {
direction: 'left',
active: false,
}
},
render() {
// Set the classNames
var aClasses = 'btn btn-default btn-shadow scroll-';
aClasses += (this.props.active ? "active" : "inactive");
return (
<a className={aClasses} onClick={this.props.onClick}>
<i className={"fa fa-lg fa-chevron-" + this.props.direction}></i>
</a>
)
}
});
The react package.json under node_modules/react says that it is version 15.3.0.
Not exactly an answer, but I've managed to get past these errors by starting from a fresh meteor directory, copying my files into that new directory, and then manually adding back all of the packages that were needed.
So I would put this down to a conflict with some older packages.
at the moment I'm fighting with Isotopejs & requirejs. As a Designer like me those things with modules and dependencies are scarying me ;)
I'm trying to get this running:
http://codepen.io/desandro/pen/mEinp
Here my require-config.js :
(function (global, require) {
'use strict';
require.config({
baseUrl: './webroot/js',
catchError: true,
paths: {
'site-core': './modules/shared/site-core',
'isotope': './vendor/isotope/dist/isotope.pkgd',
'jquery-bridget': './vendor/jquery-bridget/jquery-bridget',
'jquery': './vendor/jquery.min',
'bootstrap': './vendor/bootstrap/bootstrap'
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
})(this, require);
The File where I want to launch the isotope Gallery is following:
'use strict';
// require the require function
require(['require', 'jquery', 'isotope'],
function (require, $, Isotope) {
require(['jquery-bridget'],
function () {
// make Isotope a jQuery plugin
$.bridget('isotope', Isotope);
// now you can use $().isotope()
$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100
}
});
}
);
}
);
Thats what it looks like, at the moment. As you can see my console is filled with dependency(?) errors.
Modules: layout-modes/masonry Error: Script error for "layout-modes/masonry"(…)
Modules: layout-modes/fit-rows Error: Script error for "layout-modes/fit-rows"(…)
Modules: item Error: Script error for "item"
Modules: layout-mode Error: Script error for "layout-mode"(…)
Modules: layout-modes/vertical Error: Script error for "layout-modes/vertical"(…)
I've been juggling around with modules, the isotope API and I'm still stuck. Does somebody see where the Problem is? I don't have a clue anymore. I hope someone of you is able you point me the right direction.
Have a nice day und thank you!
Seb.
I want to use react-bootstrap in meteor. I used meteorhacks:npm and cosmos:browserify by following the instructions at:
https://react-in-meteor.readthedocs.org/en/latest/client-npm/
In myproj_root/packages.json, I added this line:
{
"react-bootstrap": "0.28.3",
"externalify" : "0.1.0"
}
After "meteor run", npm packages were automatically installed based on the command-line output. DropdownButton example works:
var {DropdownButton, MenuItem, Modal} = ReactBootstrap;
renderDropdownButton() {
return (
<div>
<DropdownButton title="Menu">
<MenuItem eventKey="1">New Post</MenuItem>
</DropdownButton>
</div>
);
},
However, when I tried Modal,
NewPostModal = React.createClass({
render() {
return (
<div>
<Modal onRequestHide={() => {}}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
</Modal>
</div>
);
}
});
the following error is thrown:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of NewPostModal
The problem seems to be that Modal.Header, Modal.Title are not recognized. Below are some of my package list info:
Meteor: 1.2.1
react 0.14.3* Everything you need to use React with Meteor
meteorhacks:npm 1.5.0 Use npm modules with your Meteor App
meteorhacks:ssr 2.2.0 Server Side Rendering for Meteor with
meteorhacks:subs-manager 1.6.3 Subscriptions Manager for Meteor
cosmos:browserify 0.9.4* Bundle NPM modules for client side with Brow...
Any help is appreciated.
I try to print out date time using like the following in vue-for
{{ moment().format('MMMM Do YYYY, h:mm:ss a') }}
but, it does not appear. It's just a blank. How I can try to use moment in vue?
With your code, the vue.js is trying to access the moment() method from its scope.
Hence you should use a method like this:
methods: {
moment: function () {
return moment();
}
},
If you want to pass a date to the moment.js, I suggest to use filters:
filters: {
moment: function (date) {
return moment(date).format('MMMM Do YYYY, h:mm:ss a');
}
}
<span>{{ date | moment }}</span>
[demo]
If your project is a single page application, (eg project created by vue init webpack myproject),
I found this way is most intuitive and simple:
In main.js
import moment from 'moment'
Vue.prototype.moment = moment
Then in your template, simply use
<span>{{moment(date).format('YYYY-MM-DD')}}</span>
In your package.json in the "dependencies" section add moment:
"dependencies": {
"moment": "^2.15.2",
...
}
In the component where you would like to use moment, import it:
<script>
import moment from 'moment'
...
And in the same component add a computed property:
computed: {
timestamp: function () {
return moment(this.<model>.attributes['created-at']).format('YYYY-MM-DD [at] hh:mm')
}
}
And then in the template of this component:
<p>{{ timestamp }}</p>
I made it work with Vue 2.0 in single file component.
npm install moment in folder where you have vue installed
<template>
<div v-for="meta in order.meta">
{{ getHumanDate(meta.value.date) }}
</div>
</template>
<script>
import moment from 'moment';
export default {
methods: {
getHumanDate : function (date) {
return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY');
}
}
}
</script>
Here is an example using a 3rd party wrapper library for Vue called vue-moment.
In addition to binding Moment instance into Vue's root scope, this library includes moment and duration filters.
This example includes localization and is using ES6 module imports, an official standard, instead of NodeJS's CommonJS module system requires.
import Vue from 'vue';
import moment from 'moment';
import VueMoment from 'vue-moment';
// Load Locales ('en' comes loaded by default)
require('moment/locale/es');
// Choose Locale
moment.locale('es');
Vue.use(VueMoment, { moment });
Now you can use the Moment instance directly in your Vue templates without any additional markup:
<small>Copyright {{ $moment().year() }}</small>
Or the filters:
<span>{{ 3600000 | duration('humanize') }}</span>
<!-- "an hour" -->
<span>{{ [2, 'years'] | duration('add', 1, 'year') | duration('humanize') }}</span>
<!-- "3 years" -->
// plugins/moment.js
import moment from 'moment';
moment.locale('ru');
export default function install (Vue) {
Object.defineProperties(Vue.prototype, {
$moment: {
get () {
return moment;
}
}
})
}
// main.js
import moment from './plugins/moment.js';
Vue.use(moment);
// use this.$moment in your components
For moment.js at Vue 3
npm install moment --save
Then in any component
import moment from 'moment'
...
export default {
created: function () {
this.moment = moment;
},
...
<div class="comment-line">
{{moment(new Date()).format('DD.MM.YYYY [ ] HH:mm')}}
</div>
Moment.js with Vue3 js
npm install moment --save # npm
yarn add moment # yarn
Main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import moment from 'moment'
const app = createApp(App)
app.config.globalProperties.$moment = moment
app.use(router).mount('#app')
Used moments in vue3 js component
{{ $moment(item.created_at).format("YYYY-MM-DD") }} // 2021-07-03
global members are not available by default in your <template>'s scope. But you can easily pass them on using computed properties.
computed: {
moment: () => moment,
console: () => console,
window: () => window
}
Now you can use any of them in your template. i.e: console.log(moment(), window).
Note this doesn't add any overhead.
vue-moment
very nice plugin for vue project and works very smoothly with the components and existing code.
Enjoy the moments...😍
// in your main.js
Vue.use(require('vue-moment'));
// and use in component
{{'2019-10-03 14:02:22' | moment("calendar")}}
// or like this
{{created_at | moment("calendar")}}
I've read the solutions posted here and it seems to be more complex than my solution so I'm presenting this one, what I do is like this
The thing you need:
import moment from 'moment';
...
data() {
return {
moment: moment, // This is the one line of code that you need
}
}
So this is what it looks like
HTML (Now this works):
<h1>{{moment().format('MMMM Do YYYY, h:mm:ss a')}}</h1>
JS:
import moment from 'moment';
export default {
data() {
return {
moment: moment, // This is the one line of code that you need
}
}
}
I'd simply import the moment module, then use a computed function to handle my moment() logic and return a value that's referenced in the template.
While I have not used this and thus can not speak on it's effectiveness, I did find https://github.com/brockpetrie/vue-moment for an alternate consideration
TESTED
import Vue from 'vue'
Vue.filter('formatYear', (value) => {
if (!value) return ''
return moment(value).format('YYYY')
})
Install the moment module:
npm i moment
In your vue component:
import moment from 'moment';
export default {
data(){
},
methods:{
moment(date){ return moment(date) }
}
}
Inside the template:
<span>{{ moment().format('MMMM Do YYYY, h:mm:ss a') }}</span>