When I try to use Redux with Polymer (lit Element) I got this error:
"Process is not defined ad redux.js".
How to solve this error?
I found a hack solution from Polymer's PWA Starter kits.
Add this lines to your index.html:
<script>
// HACK(keanulee): The Redux package assumes `process` exists - mock it here before
// the module is loaded.
window.process = {
env: {
NODE_ENV: 'production'
}
};
</script>
Works like a charm.
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.
Update : see edit at the end
Follow up of my previous question here : Include Vue.js component in Wordpress plugin without CDN
The very pertinent answer from Okba is causing me headaches. How do I build something with Vue.js that I can use in wordpress ?
I work with Vue-cli. I have tried to build my project as a library using this command line :
vue-cli-service build --target lib --name myVueLibrary ./src/main.js
And then importing the dist/* files in wordpress :
wp_enqueue_script('myPlugin', plugin_dir_url(__FILE__) . './my-plugin.js', [], '0.1', true);
wp_enqueue_script('myVueLibrary', './vue-plugin/myVueLibrary.common.js', [], '0.1.0');
where my-plugin.js looks like this (I am using shortcodes to replace a <div> content with whatever my plugin puts there) :
var elements = document.querySelectorAll('[my-plugin-atts]');
elements.forEach(function (element) {
var atts = JSON.parse(element.getAttribute('my-plugin-atts'));
var vm = new Vue({
el: element,
created: function () {
this.atts = atts;
},
template: '<div class="plugin-container">{{atts.id}}</div>'
});
});
And I get the following error :
Uncaught ReferenceError: Vue is not defined
But ! If I replace my vueBaoViz.common.js import by a Vue CDN import, my wordpress plugin displays what I want it to display.
wp_enqueue_script('myPlugin', plugin_dir_url(__FILE__) . './my-plugin.js', [], '0.1', true);
wp_enqueue_script('vue', 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js', [], '2.5.16');
My guess is my Vue build is not ok, how do I build something I can use like that, and that packs Vue.js within itself ?
So, turns out i'm an idiot, I forgot to add plugin_dir_url(__FILE__) before the path when loading a local file. This solved my problem.
1 - You can use vue js - non spa, from cdn or with webpack look at the https://v2.vuejs.org/v2/guide/#Composing-with-Components for how you will use vue js in regular js files.
2- You can use vue-cli like a standart spa project with wordpress rest api : https://developer.wordpress.org/rest-api/
I'm having an issue triggering method calls while writing feature tests. I'm not actually given an error in the chimp terminal log, but the server.call line is where the failure is highlighted. I believe this might be related to the folder structure of the app (which I've loosely based on Letterpress) or the order in which the call is defined and then triggered. When I move the method call out to my main.js file (in the root folder of the app), it works without a problem.
hooks.js path: /app/tests/cucumber/features/support/hooks.js
(function(){
module.exports = function() {
this.Before(function() {
console.log("server calling");
server.call("fixtures/resetUsers"); //test stops here
});
};
})();
fixtures.js /app/packages/fixtures/fixtures.js
(function(){
'use strict';
Meteor.methods({
"fixtures/resetUsers": function() {
Meteor.users.remove({});
}
});
})();
package.js /app/packages/fixtures/packages.js
Package.describe({
name: 'forum:fixtures',
version: '0.0.1',
summary: '',
debugOnly: true
});
Package.onUse(function(api) {
api.versionsFrom('1.2.1');
api.use('ecmascript');
api.addFiles('fixtures.js', 'server');
});
Note: I originally didn't have the fixtures folder wrapped in the packages folder (it still didn't work then) but came across this post by #Xolv.io, the developers of Chimp.js who advised to do so.
with the new chimp, you can just use:
server.execute(function() {
// code you put here will run on the server
});
Check this repository for examples:
https://github.com/xolvio/automated-testing-best-practices/
In your sample repo, if you define a meteor method, 'something', you can call as server.call('something').
If you have a standard method definition (not even a meteor method), say something2=function(){}, with xolvio:backdoor, you can server.execute('something2'). ( calling chimp with --ddp switch)
I want to launch my angular application which works in general, but when I get to use moment I got the error that "moment" is undefined.
I am using "angular-moment" from here
var app = angular.module("MyApp",
[
"ngRoute",
"ui.bootstrap",
"angularMoment",
'angular-jwt',
'angular-storage'
]);
My package.json looks like this
{
"name": "myapp",
"main": "index.html",
"toolbar":"true",
"dependencies": {
"moment": "*"
}
}
I am trying to use it with
app.config(function (moment) {
moment().format();
});
which says that moment ist undefined.
How do I have to modify my package.json to get node-webkit find moment? Or Angular-Moment?
Thanks in advance.
Make sure you have both moment and angular-moment loading in your HTML file.
Follow the instructions on the angular-moment github page. I don't think moment().format(); is valid because moment should not be a function..
Also try including "node-remote": "<local>" in your package.json file.
I encountered the same problem, I use this code snippet to solve it. You should replace vendor.js with your own files suce as angular, moment.
<script>
//hide global object
try {
window.globalTmp = global;
global = undefined;
} catch (e) {}
</script>
<script src="vendor.js"></script>
<script>
//recover global object
try {
global = window.globalTmp;
window.globalTmp = undefined;
} catch (e) {}
</script>
moment is undefined because it's added to global other than window. global is an object of node-webkit.If you type global in console, you will find global.moment in output.
I found this snippet in moment's source code which can support my explain.
var moment,
VERSION = '2.8.4',
// the global-scope this is NOT the global object in Node.js
globalScope = typeof global !== 'undefined' ? global : this,
I have a asp.net mvc app . In Scripts I have the subfolder app containing Controller.js. I also have another subfolder Spec containint ControllerSpec.js - written with jasmine.
describe('PhoneCat controllers', function () {
beforeEach(module('phonecatApp'));
describe('PhoneListCtrl', function () {
it('should create "phones" model with 3 phones', inject(function ($controller) {
var scope = {},
ctrl = $controller('PhoneListCtrl', { $scope: scope });
expect(scope.phones.length).toBe(3);
}));
});
});
In SpecRunner.cshtml i have just included this files:
<script type="text/javascript" src="/Scripts/app/controllers.js"></script>
<script type="text/javascript" src="/Scripts/Spec/controllersSpec.js"></script>
In karma init, I have added the path of those 2.js.
Can you please tell me how can I do to make it work? If I run vs the Jasmine code it's ok.
Thx
You must add a reference to angular.js as well
There could be a variety of reasons for such an error, so it would help to solve with a bit more info on your part.
However off hand and having seen this error before in my battles through angular unit testing, I have to ask are you including a link to angular-mocks.js?
The lastest repo: http://code.angularjs.org/1.2.15/
Angular Mocks: http://code.angularjs.org/1.2.15/angular-mocks.js
A copy of your karma.conf.js would also help....