I have an issue where I want to extract all my components out into a separate repository but I want to load them in via composer instead of npm (business decision).
This was all working fine. Add it as a dependancy in the composer.json file and then add the following to the webpack.mix.js file;
mix.webpackConfig({
resolve: {
alias: {
'#ui' : path.resolve(__dirname, 'vendor/companyname/ui/src'),
}
}
});
And then use the following to import them in;
import PrimaryButton from "#ui/buttons/primary";
Which all worked fine!
Until I wanted to use slots. If I include a slot I get the following error;
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nodeName')
at new create (svg.js?1929:3616)
at globalRef.SVG (svg.js?1929:31)
at Proxy.mounted (Editor.vue?721f:63)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js?5c40:2909)
at flushPostFlushCbs (runtime-core.esm-bundler.js?5c40:357)
at flushJobs (runtime-core.esm-bundler.js?5c40:393)
In this example the component looks like this;
<template>
<button #click="click">
<slot></slot>
</button>
</template>
<script>
export default {
emits: ['click'],
methods: {
click() {
this.$emit('click')
}
}
}
</script>
Now, if I copy this component into the project repository and load it in that way, there is no error and works as intended!
Can anyone point me in the direction of where I am going wrong please.
Update
I have removed other components from view I'm rendering and now have a new error;
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isCE')
at renderSlot (runtime-core.esm-bundler.js?c099:5832)
at Proxy.render (primary.vue?f782:3)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:1166)
at componentEffect (runtime-core.esm-bundler.js?5c40:5201)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at effect (reactivity.esm-bundler.js?a1e9:17)
at setupRenderEffect (runtime-core.esm-bundler.js?5c40:5154)
at mountComponent (runtime-core.esm-bundler.js?5c40:5113)
at processComponent (runtime-core.esm-bundler.js?5c40:5071)
at patch (runtime-core.esm-bundler.js?5c40:4673)
Update
This is not the answer but the reason for this, from what I can tell is that there were two instances of Vue in play, one from the library and one in my application. I have no idea how to stop this but if I push the contents up to a repo and pull it in via npm then it works normally. Still would like to know how to get this running locally without using npm.
Related
I am trying to learn Vue3 on a hobby project and have an issue when trying to set up Auth0 using their SDK in the App.vue file and I'm hoping someone can explain the issue!
I've followed the docs but converted (I think) the code to use the <script setup>...</script> syntax but I am getting an error when using the useAuth0 function in my setup. Vue is warning that inject() can only be used inside setup() or functional components..
If I call inject directly in the setup block it works, and if I copy the code for useAuth0 in to a file in my application and import and call it resolves it and the login method works.
I don't understand why the provided implementation doesn't work when copying the code does - could anyone please explain that?
When copying the code the loginWithRedirect function works but the other items on on the auth0 client don't seem to (it seems to be stuck as isLoading: true
Here's the relevant code
I've registered the plugin in the main.ts and then trying to use it in app.vue to add a login button - there seemed to be a type issue with the plugin hence the any cast for now
main.ts
const auth0Plugin = createAuth0({
domain: "dev-9vwsdbs4.us.auth0.com",
client_id: "HtmGSIyIGplusxDGTo1VwWVXebgOfIVM",
redirect_uri: window.location.origin,
});
app.use(auth0Plugin as any);
app.vue
<script setup lang="ts">
import { RouterView } from "vue-router";
import { useAuth0 } from "#auth0/auth0-vue";
const { loginWithRedirect, isLoading } = useAuth0();
</script>
<template>
<RouterView />
<p>{{ isLoading }}</p>
<button #click="loginWithRedirect">Login</button>
</template>
This is the output in the console:
[Vue warn]: inject() can only be used inside setup() or functional components.
runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of setup function
App.vue:4 Uncaught TypeError: Cannot destructure property 'loginWithRedirect' of 'useAuth0(...)' as it is undefined.
The Package
I have a shared library as Meteor package with the following structure:
ui
- componentA.html
- componentA.js
- loader.js
- ...
tools
- toolXY.js
- ...
and while tools are shared among many of my apps (and the ui), the ui part is only used by one app. Consider the template to be totally simple:
componentA.html
<template name="componentA">
<span>yea component A</span>
</template>
componentA.js
import { Template } from 'meteor/templating'
import { toolXY } from '../tools/toolXY'
import './componentA.html'
// ... template code
loader.js (little helper, think the package has 100 ui components)
export const loader = {
componentA: {
template: 'componentA',
load: async function () {
return import('./componentA')
}
}
}
Because the ui is used in one app only, I made the templating and dynamic-import a weak dependency:
Package.onUse(function (api) {
api.versionsFrom('1.6')
api.use('ecmascript')
api.use('dynamic-import', ['client'], { weak: true })
api.use('templating', ['client'], { weak: true })
})
The Problem
I add my package and the weak dependencies to a project via
$ meteor add dynamic-import templating me:mypackage
and import the ui on the client like the following:
client/main.js
import { loader } from 'meteor/me:mypackage/ui/loader'
Meteor.startup(() => {
loader.componentA.load()
.then(() => console.log('loaded'))
.catch(e => console.error(e))
})
It will result in the following error:
Error: "Cannot find module './componentA.html'"
makeMissingError http://localhost:5050/packages/modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:232
resolve http://localhost:5050/packages/modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:238
moduleLink http://localhost:5050/packages/modules.js?hash=88e9e724ccc8459066fbe9e3889ef37c7bb7067f:353
module /node_modules/meteor/me:mypackage/ui/componentA.js:16
makeModuleFunction http://localhost:5050/packages/dynamic-import.js?hash=cf582bcc349503492678c9fd3f7bba4a610f70e5:138
fileEvaluate http://localhost:5050/packages/modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:346
require http://localhost:5050/packages/modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:248
moduleLink http://localhost:5050/packages/modules.js?hash=88e9e724ccc8459066fbe9e3889ef37c7bb7067f:360
getNamespace http://localhost:5050/packages/dynamic-import.js?hash=cf582bcc349503492678c9fd3f7bba4a610f70e5:187
dynamicImport http://localhost:5050/packages/dynamic-import.js?hash=cf582bcc349503492678c9fd3f7bba4a610f70e5:40
Checking for Package.templating inside loader.js, as well as componentA.js resolves to Object { Template: Template(viewName, renderFunction) } (because it has been installed as package to the project).
The fix that isn't really a fix
If I turn off the weak dependency on templating it will work fine:
api.use('templating')
This, however, will cause all my applications to load templating, allthough they do not require it.
The question
Why is it behaving like this? Shouldn't this work with weak dependency when the dependency has been added to the project?
I am trying to create a package for Meteor, unsuccessfully unfortunately. I'm on Meteor 1.8.1. My goal is to make a template for a button that I can use in my application like this {{> testButton}} (I am just trying it out atm).
package.js
Package.describe({
name: 'button-test',
version: '0.0.1',
summary: '',
git: '',
documentation: 'README.md'
});
Package.onUse(function (api) {
api.use(['ecmascript']);
api.use(['session', 'templating'], ['client', 'server']);
api.mainModule('button-test.js');
});
Package.onTest(function (api) {
api.use('ecmascript');
api.use('tinytest');
api.use('button-test');
api.mainModule('button-test-tests.js');
});
button-test.js
// Variables exported by this module can be imported by other packages and
// applications. See button-test-tests.js for an example of importing.
import './testButton.js';
testButton.js
import { Template } from 'meteor/templating';
Template.testButton.events({
'click #buttonT': () =>
console.log('Clicked the button')
});
testButton.html
<template name="testButton"><button id="buttonT">TEST</button></template>
I have some problems with this;
Running the code like this returns the error TypeError: Cannot read property 'testButton' of undefined. So there is a problem with Template, but I don't know what it is, since I have added it with api.use
When I try to add import ./testButton.html to testButton.js I get the error Error: Cannot find module './testButton.html'
I looked at the source code for accounts-ui-unstyled, but this is written on an older meteor version.
Does anybody have an idea as to what I am doing wrong?
The problem was with the api.mainModule, I solved it by having my Package.onUse like this:
Package.onUse(function (api) {
api.use(['templating', 'blaze'], 'client');
api.use('ecmascript');
api.addFiles(['button-test.js'], 'client');
});
After using the addFiles instead of mainModule, I could import the html and the Template problem disappeared. I have no idea why this works and mainModule does not, but hey, it does.
I am using vue 2 and vue-cli 3. I am trying to bind the src of an tag to a variable in data.
Specifically I am doing the following:
<img class="img-time-matters" :src="`./../assets/time-comparison-${locale}.png`">
export default {
name: "home",
components: {},
data() {
return {
locale: locale // 'en'
};
}
}
The binding works
Using Chrome developer tools and examining the network activity I see that the binding works:
http://localhost:8080/assets/time-comparison-en.png
However the resource is not found.
If I remove data binding at hard code the course path to:
<img class="img-time-matters" :src="`./../assets/time-comparison-en.png`">
Vue resolves the resource link to look for the image at:
http://localhost:8080/img/time-comparison-en.74a6f0ca.png
How do I get the Vue to data bind in such a way that it resolves the binding correctly (i.e. time-comparison-en.74a6f0ca.png).
Thanks!
Please try require
<img class="img-time-matters" :src="require(`../assets/time-comparison-${locale}.png`)">
I've installed a Meteor phone authentication package mys:accounts-phone, which should add a phone.number subfield into users collection. I try to access this field as follows:
Meteor.user().phone.number
but typescript shows error
Property 'phone' does not exist on type 'User'.
On the other hand, I have custom props in users.profile, and can easily access them in this way.
Insecure is not yet removed. Autopublish is ON.
this happens sometime when our angular component is initialized but our meteor data is not reached from server.
try to use user injection in place of Meteor.user()
import {Component} from "#angular/core";
import { InjectUser } from 'angular2-meteor-accounts-ui';//<--**** import this****
#Component({
selector: "login-buttons",
template
})
#InjectUser('user') //<--*** add this***
export class LoginButtonsComponent {
user: Meteor.User; //<--*** add this ***
constructor(private router: Router) {}
}
now in user variable you will have all values of Meteor.User
if you want to print in html part use this
<div *ngIf="user">
{{user.phone.number}}
</div>
don't forget to install
meteor add accounts-password
meteor npm install --save angular2-meteor-accounts-ui
and in app.module.ts file
import { AccountsModule } from 'angular2-meteor-accounts-ui';
#NgModule({
imports: [
... other modules here
AccountsModule
],
hope this will work. if this not work let me know i will tell you one other solution
Got probable answer from Meteor docs.
It explains why username property appears. By default, Meteor publish only a number of fields considered to be public. To exposure any additional fields they must be published explicitly.
Not yet have time to test, but think it should work.
The other reason, with the same sympthoms, when publication code do not executed at server side. Try to put
Meteor.startup(() => {
// code to run on server at startup
Meteor.publish('userData', function() {
if(!this.userId) return null;
return Meteor.users.find(this.userId
//, {fields: {lastname: 1,}}
);
});
});
in a file within /server folder of your application.