I try to collect some js functions global in the app.js. My app.js looks like this
// Import global dependencies
import './bootstrap';
import './argon';
export default class App {
test() {
console.log('test');
}
}
jQuery(() => {
window.App = new App();
});
In my blade view I try to call the test function on this way:
$(function () {
App.test();
});
As result I get the error message ReferenceError: App is not defined. Where is the problem?
There is no need to export an object you don't import anywhere. The jQuery code in your app.js is also unnecessary, there is no need to wait for the dom to be loaded before creating the window.App object.
import './bootstrap';
import './argon';
class App {
test() {
console.log('test');
}
}
window.App = new App();
Related
Can someone help me out configuring a global function that I can call in all my Vue files?
When there is this in my Vue file:
#click="ModalShow.show('my-create')"
In the app.js I defined this constant:
const Modals = {
show(screen) {
alert(screen);
// other logic that i implement that should be triggered
},
};
But I keep getting:
TypeError: undefined is not an object (evaluating '_ctx.Modals.show')
What am I missing? It's a Vue project with the composition API
You can use provide/inject, first provide your function to your child components from the app (or parent component)
const Modal = {...}
const app = createApp({})
app.provide('Modal', Modal)
Then inject it into your component
import { inject } from 'vue'
export default {
setup() {
const Modal = inject('Modal')
return { Modal }
}
}
Or via script setup:
<script setup>
import { inject } from "vue";
const Modal = inject("Modal");
</script>
I have function inside user.js with default export like this
export default {
var getListFriends = async (accessToken) =>{
}
....other function
return {
getListFriends,
...other function...
}
}
then I import it to index.js
import userService from './user';
Then I will add only index.js to plugin.
I can call this.$userService (it shows as anonymous function) but this.$userService.getListFriends return undefined.
How can I call function getListFriends from import.
Thank you very much.
where is user.js?
if its inside plugins directory, you have to use inject to add it to your nuxt.
then you can access it via nuxt object inside your code.
see this example from nuxt docs:
export default ({ app }, inject) => {
// Inject $hello(msg) in Vue, context and store.
inject('hello', msg => console.log(`Hello ${msg}!`))
}
you can see the full document here
ok now for this to work the way you want you need to change your user.js file,
export default {
friends: () => {
console.log('hi bro');
},
notFriends: () => {
console.log('go away man im not your bro');
}
};
something like this.
you dont need inject or app in your user.js.
and your code problem is that you are defining a function and trying to access it's inner values from the outside like:
function boo() {
var b = 0;
}
you can not access the value of b with boo.b. its a local variable to the boo function
instead create a object and have multiple functions inside your object
I am building an app in svelte and I have a helper.js file inside /src folder where I am going to put helper functions.
I am trying to import the helper.js file into the GetData.svelte file:
GateData.svelte:
<script>
import Helper from "./helper.js";
let helper = new Helper();
</script>
helper.js:
class Helper {
constructor() {
console.log("hello world");
}
}
main.js:
import App from './App.svelte';
const app = new App({
target: document.body,
});
export default app;
However, the error message I get is:
==>> Uncaught ReferenceError: Helper is not defined (main.js 6)
Do I have to import the helper.js file in the main.js as well?
Thank you for any help.
You need to export your class in helper.js:
export class Helper {
// ...
}
and then import it in main.js as
import { Helper } from "./helper.js";
Or, if you only want to export this one class from the helper file, you can use
export default class Helper {
// ...
}
and import as you currently do:
import Helper from "./helper.js";
I do not understand how nodejs resolves import statements. I constantly get the cannot import before initialization error.
For example, I have a init module, which exports an async function and a couple of constants that it creates.
import init, { DATA_VALIDATION_POOL, QUEUE_POOL, IS_REPLAY_POOL } from './init.js';
and then app.js waits for the init function to run. init.js itself has imports as well, and some of them resolve and some of them fail. I do not understand why some fail and some import properly.
In this example, everything to the point of importing from ./utils/pool.js is working fine, but for whatever reason, it cannot import the contents of ./utils/dash.js.
./utils/dash.js doesn't import anything from ../init.js
init.js
...
// CREATE POOLS
...
export const QUEUE_POOL = createPool('QUEUE_POOL');
// EMOJI INTERACTIONS
...
registerEmojiInteraction(QUEUE_POOL, {
...
onAdd: goToPrevPage,
});
const init = async () => {
...
await createCoaches(allCoachIds);
};
import { rankEmojis, raceEmojis, vsRaceEmojis } from './Emojis.js';
import { registerEmojiInteraction, onAddHelper } from './utils/emojiInteraction.js';
import { createPool } from './utils/pool.js';
import {
finishedCoachingStudent,
goToPrevPage,
selectStudent,
goToNextPage,
} from './utils/dash.js';
import { createCoaches } from './utils/coach.js';
export default init;
This is the module I'm exporting. Nothing much, just initializing Parse's JavaScript SDK:
mixin.js:
import Parse from 'parse'
var ParseMixin = {
created: function () {
Parse.initialize('APP_ID', 'CLIENT_ID')
}
}
export default ParseMixin
And this is how I'm importing it and using it:
main.js:
import ParseMixin from '../mixins'
export default {
mixins: [ParseMixin],
methods: {
submit () {
const project = {
title: this.title,
content: this.content
}
const Obj = Parse.Object.extend(store.class)
const obj = new Obj()
obj.save(project).then(() =>
console.log('Saved.')
)
...
However, right now I get this error:
error no-undef "Parse" is not defined
/home/alex/node/cotrib/src/components/ProjectList.js:54:19
const Obj = Parse.Object.extend(store.class)
Because Parse is not being imported from mixin.js.
How to modify the code so that Parse is also imported?
If you need to reference Parse in main.js, then you should load it there:
// main.js
import Parse from 'parse'
import ParseMixin from '../mixins'
Every module should import its dependencies.
You could expose Parse from ParseMixin if you wanted to:
// mixins.js
export {Parse};
// main.js
import ParseMixin, {Parse} from '../mixins';
but having default and named exported seems to be more confusing than directly importing the dependency.