i'm building a calendar module on my current project using Datepickk library. But when i tried to initialize it, it always show "ReferenceError: Datepickk is not defined" error.
this is my code:
- calendar.js
const schoolCalendar = () => {
//Initialize
var datepicker = new Datepickk();
datepicker.show();
}
export default schoolCalendar;
main.js file
import schoolLogin from "./pages/school/login/_login";
import schoolCalendar from "./pages/school/_calendar/_calendar";
function loadOnDasboardPages()
let pageLocation = document.body.getAttribute('data-dashboard');
switch (pageLocation) {
case "teacher":
dashboardTeacher();
break;
case "school-calendar":
schoolCalendar();
break;
default:
return null;
}
}
loadOnDasboardPages();
the error:
"ReferenceError: Datepickk is not defined" appeared on console when i tried to run it.
what is the cause for this error as i already followed its documentation.
How do i fix this issue? so i can use this library for my project.
thank you very much in advance.
Assuming you use npm to install datepickk, you need to import the library to use it. The same goes for any library installed with npm.
So your file calendar.js should look like:
import Datepickk from 'datepickk';
const schoolCalendar = () => {
//Initialize
var datepicker = new Datepickk();
datepicker.show();
}
export default schoolCalendar;
or
import "datepickk/dist/datepickk.css";
import Datepickk from "datepickk/dist/datepickk";
const schoolCalendar = () => {
//Initialize
var datepicker = new Datepickk();
datepicker.show();
}
export default schoolCalendar;
Sample code: https://codesandbox.io/s/optimistic-shannon-ikt4e
Related
I use Sentry + code push in ma project but my push code install is causing problem....
On a version in test flight, the modifications were not applied correctly (while without push code everything is ok).
Can i with sentry install it this way:
first I "init" my code push like this:
export const intiCodePush = () => {
const env = getEnvVars()
codePush.sync({ deploymentKey: env?.codePushKey });
};
And I use it in my App.tsx like this:
useEffect(() => {
intiCodePush();
SplashScreen.hide();
}, []);
Always in my App.tsx I set some options for code push:
const codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_START };
And I wrap my App with Sentry and code push like this:
export default Sentry.wrap(codePush(codePushOptions)(App));
Is it good for you?
I want to override an action from cart module store. I am trying to extend this CartModule by following this link
Extending and Overriding Modules Doc
I have created a file /src/modules/cart/index.ts with following code
import { VueStorefrontModuleConfig, extendModule, VueStorefrontModule } from '#vue-storefront/core/lib/module'
import { CartModule } from '#vue-storefront/core/modules/cart'
import { cartModule } from './store'
const cartExtend: VueStorefrontModuleConfig = {
key: 'cart',
store: {modules: [{key: 'cart', module: cartModule}]},
afterRegistration: function () {
console.log('Cart module extended')
}
}
extendModule(cartExtend)
export const registerModules: VueStorefrontModule[] = [CartModule]
I am getting error that CarModule type does not match with VueStorefrontModule
Also I don't know what to do next in order to make it effective. Docs are not clear about it. Please help. Thanks
If you want to overwrite action of module you don't want to extend module but store.
Here is example:
Vuestorefront has CartModule (in core) and you need to change code of action refreshTotals.
Code your in file /src/modules/cart/index.ts:
import {StorefrontModule} from '#vue-storefront/core/lib/modules';
import {extendStore} from '#vue-storefront/core/helpers';
const cartModule = {
action: {
async refreshTotals({dispatch}, payload) {
//
// your new (and better!) code ;-)
//
}
},
}
export const MyAwesomeCart: StorefrontModule = function () {
extendStore('cart', cartModule);
}
In last step register this your new module under /src/modules/client.ts:
..
...
import {CartModule} from '#vue-storefront/core/modules/cart';
import {MyAwesomeCart} from "modules/cart/index";
export function registerClientModules() {
registerModule(CartModule); // original module
registerModule(MyAwesomeCart); // your new overwiritng module
...
..
I created a plugin, which should post some data to my backend. I tried to set up some backend url config. I checked the URl within my plugin with "console.log(...)" as u can see withn my code (in sendDataToBackEnd.js). But i getting following output "undefined".This is the error: "Error message: Cannot read property 'backEndUrl' of null"
Project structure:
project1
public
backend-config.js
faviocon.ico
index.html
src
App.vue
main.js
config
backEndUrlConfig.js
plugin
sendDataToBackEnd.js
Therefore I created backend-config.js within in Folder "public"
(function (window) {
window._backendconfig = {
urlBackend: `http://localhost:8090/api/auth/event`,
}
}(this));
My config.js looks like this:
export default { ...window._backendconfig }
And my PLugin "sendDataToBackEnd.js" looks like this:
import url from '../../config/backendURLconfig';
var backEndUrl = url.urlBackend;
console.log(backEndUrl)
const sendDatatoBackEnd = {}
sendDataToBackEnd.install = function (Vue){
{Method to send Data to my Backend}
}
export default sendDatatoBackEnd;
You're mixing using global scope JS (setting a property on window) in your config file with module style JS in your sendDataToBackEnd.js file (importing and exporting from modules).
You either need to export something from config (best option if you're using modules), or just access it from the window.
backendURLconfig.js
const config = {
urlBackend: `http://localhost:8090/api/auth/event`,
}
export default config
sendDataToBackEnd.js
import config from '../config/backendURLconfig';
var backEndUrl = config.urlBackend;
console.log(backEndUrl)
const sendDatatoBackEnd = {}
vuePlugin.install = function (Vue){
{Method to send Data to my Backend}
}
export default sendDatatoBackEnd;
I'm writing a new build script for my project using Webpack 4, so far, I have not faced any issue until today, when I have to call a global function with parameters.
Below is an example, I did without parameters for Google reCaptcha:
const enableFormButton = () => {
var elements = "#form_submit_btn, #form_submit_btn_alt";
$(elements).removeAttr("disabled");
$(elements).css({"cursor":"pointer"});
$(elements).removeClass("button button-3d button-red button-small").addClass("button button-3d button-green-invert button-small");
}
const recaptcha = document.querySelectorAll(".g-recaptcha");
recaptcha.forEach((captcha) => {
captcha.setAttribute('data-callback', 'enableFormButton');
});
export { enableFormButton }
and in my entry index.js file, it would look like this:
import {enableFormButton} from './some_js_file'
window.enableFormButton = enableFormButton
Now, this is what I tried with a global function with parameters:
const exampleFunction = (arg1) => {
// do something here
}
export {exampleFunction}
and in the index.js file:
import {exampleFunction} from './some_js_file'
window.exampleFunction = exampleFunction
I tried it, there are no build errors but I get an error in the console saying
"Uncaught TypeError: exampleFunction is not a function"
Any idea on how to solve this? Btw, I'm kind of new to using Webpack.
Thanks to #CertainPerformance's tip, I added the export keyword to the function exampleFunction(arg1), which should look like this:
export exampleFunction(arg1){
// something
}
Imported the function to another .js file:
import {exampleFunction} from './somescript';
And then, it worked! :)
So turns out, I learnt something for the day!
Im learning to make Vue Plugin, based on https://v2.vuejs.org/v2/guide/plugins.html,
this is my simple code:
plugin1.js:
AlertPlugin.install = function (Vue, options) {
Vue.prototype.$classicalert = function (message) {
alert(message)
};
};
app.js:
window.Vue = require('vue');
import AlertPlugin from './plugin1.js'
Vue.use(AlertPlugin);
const app = new Vue({
el: '#app',
render: h => h(Main)
});
when im trying to run it, the web page become blank, and error AlertPlugin is not defined.
please help?
In your plugin1.js file, you are attempting to set the install property of the AlertPlugin object, which (as the error says) is not defined.
Your plugin1.js file should look like this:
export default {
install: function (Vue, options) {
Vue.prototype.$classicalert = function (message) {
alert(message)
};
}
}
This defines a default object to export containing a property install. When you import this object as AlertPlugin, like you are doing in app.js, it will result in an AlertPlugin object with the install property you defined in the plugin's file.