Uncaught (in promise) TypeError: Illegal constructor at new SvelteElement (index.mjs:1381) - custom-element

Uncaught promise when registering a custom element using the latest
sapper, svelte, nodeJS, and rollup stack using the following
statements.
REPL example: https://svelte.dev/repl/489ee8acd10848b0bb1feb2535bd6cc5?version=3.16.5 created locally
<svelte:options tag="parlax-background" />
& rollup.config.js
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({...})
svelte({
dev: !production,
customElement: true,
// and tried also with customElement: { tag: "my-element"}
hydratable: true,
emitCss: true
I want to mention that I had tested on a fresh project
Logs
[Client Side]
=> Uncaught (in promise) TypeError: Illegal constructor
at new SvelteElement (index.mjs:1381)
[Server Side]
=> The 'tag' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?
44: <svelte:options tag="my-element" />
1. When I registering [ **customElement: true ] in the config i get**
2. If I do not register my element in the config I do not get any error, but neither my element is registered :(
Ref: https://github.com/sveltejs/svelte/issues/4132

As described in the referenced GitHub issue, once you configure the Svelte compiler with customElements: true, you're expected to provide an element tag for all your components (using <svelte:options tag="my-component"/>.
In your REPL's example, this would mean updating App.svelte with e.g. <svelte:options tag="my-app"/>
When you now run the app, you should not see the error in the console anymore, but a working app.

Related

AAD B2C (MSAL) with Expo and react-native-msal error on init

I'm using expo#4.5.2 and react-native-msal#4.0.0
I've copied the B2CClient class from b2cClient.ts provided in the example directory of react-native-msal and my initialization is set up the same as in App.tsx example provided as well (https://github.com/stashenergy/react-native-msal/tree/master/example/src).
My configuration is the following:
auth: {
clientId: '<CLIENT_ID>',
authorityBase: 'https://example.b2clogin.com/tfp/example.onmicrosoft.com',
policies: {
signInSignUp: 'B2C_1_mySignupPolicy',
passwordReset: 'B2C_1_myPasswordResetPolicy',
},
redirectUri: Platform.select({
android: 'msauth://com.company.app/l5rSw0yVmvlj7l5rSw0yWAYk5tfVb2j%2F',
default: undefined,
}),
},
I've done the additional step for expo (https://github.com/stashenergy/react-native-msal/blob/master/docs/expo_setup.md). But I get a warning in my editor: Failed to resolve plugin for module "react-native-msal" (I'm using the same version of react-native-msal that was used when the setup example was written)
I can still build the app regardless of this warning. But when b2cClient.init() runs I get this error:
[TypeError: null is not an object (evaluating '_nativeModule.default.createPublicClientApplication')]
Supposedly this package should work with expo and my configuration is the same as the example. How do I fix this?

How to fix 'STACK: ReferenceError: [BABEL]' at running jest tests

at running npm test i get the following error for every existing typescript class.
im using vue, jest
STACK: ReferenceError: [BABEL] ... Unknown option: base.cwd. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`

How to I debug systemJS error loading js as "" from

I am getting the following error:
system.src.js:123 Uncaught (in promise) Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:8000/dist/jquery.js
Error: XHR error (404 Not Found) loading http://localhost:8000/dist/jquery.js
Error loading http://localhost:8000/dist/jquery.js as "jquery" from http://localhost:8000/jspm_packages/npm/toastr#2.1.2/toastr.js
How do I go about fixing this?
I have done npm install and jspm install.
Thanks!
You need to make sure that jquery is mapped to the correct path in node_modules and also any modules that depend on jquery have the dependency explicitly declared:
map: {
'jquery' : 'path_to_jquery'
},
meta: {
'file_that depends_on_jquery' : {
deps: ['jquery']
}
}

Custom Module is not installed on the kurento media server but appears on the kurento-media-server --list

I am trying to develop a custom module for the Kurento-media-server but i have find two roadblocks,following the instructions on the documentation i have been able to:
create the custom module folder with the command:
kurento-module-scaffold.sh <module_name> <output_directory>
and them generate the files with:
cmake .. -DCMAKE_INSTALL_PREFIX=/usr && make && sudo make install
i have added two lines to the bgRemoverFilterOpenCVImpl on the /src/server/objects/bgRemoverFilterOpenCVImpl.cpp file so the filter adds a hello world text to the image.
void bgRemoverFilterOpenCVImpl::process (cv::Mat &mat)
{
cv::Point textOrg(50, 50);
putText( mat, "Hello World", textOrg, 1, 2, cv::Scalar(0, 0, 0) );
}
i them build the .deb file with debuild -us -uc and install it successfully so that when i run the kurento-media-server --list command i see my new custom module on the list:
....
bgRemoverFilter
bgremoverfilter.bgRemoverFilter
....
i them generated the js client code with the command cmake .. -DGENERATE_JS_CLIENT_PROJECT=TRUE and added the js generated folder to my node.js project using npm link for test purposes i am using the Kurento-Chroma project from the Kurento-node-repository so i have modified it to register my module and to create my custom filter instead of the chroma one. for this made changes to the server.js file on lines 28 and 249:
...
//kurento.register('kurento-module-chroma');
kurento.register('kurento-module-bgremoverfilter');
...
pipeline.create('bgremoverfilter.bgRemoverFilter', options, function(error, filter) {
if (error) {
return callback(error);
}
return callback(null, webRtcEndpoint, filter);
});
the node application runs correctly but when i start the loopback to get my videofeed with the filter applied it sends this error message:
Error message from server: Exiting with error SyntaxError: Module 'bgRemoverFilter' is not installed in the Kurento Media Server
despite the module being loaded on kurento-media-server --list the app cant create the filter object, i thought this was a naming issue so when i create a one word name custom module like "harel" to avoid camel case naming problems and install it i get on the list:
...
harel
harel.harel
...
and when trying to create and use this filter on the same kurento-chroma example i get a different error:
SyntaxError: sink param should be a MediaElement, not harel
at ChecktypeError (/home/ubuntu/www/kurento-chroma/node_modules/kurento-client/lib/checkType.js:32:10)
at checkMediaElement (/home/ubuntu/www/kurento-chroma/node_modules/kurento-client-core/lib/abstracts/MediaElement.js:1082:11)
at checkType (/home/ubuntu/www/kurento-chroma/node_modules/kurento-client/lib/checkType.js:84:25)
at WebRtcEndpoint.MediaElement.connect (/home/ubuntu/www/kurento-chroma/node_modules/kurento-client-core/lib/abstracts/MediaElement.js:489:3)
at connectMediaElements (/home/ubuntu/www/kurento-chroma/server.js:260:20)
at /home/ubuntu/www/kurento-chroma/server.js:197:17
at /home/ubuntu/www/kurento-chroma/server.js:254:20
at callback2 (/home/ubuntu/www/kurento-chroma/node_modules/kurento-client/lib/KurentoClient.js:527:7)
at /home/ubuntu/www/kurento-chroma/node_modules/kurento-client/lib/KurentoClient.js:385:7
at Object.dispatchCallback [as callback] (/home/ubuntu/www/kurento-chroma/node_modules/kurento-jsonrpc/lib/index.js:613:9)
so, am i missing something on the installation process? i suspect there is something wrong with the JS generated code in the first case.
on the second case when using a single word name, why does this work? the app is able to create the filter but then fails when trying to connect it to the webrtcEndPoint
i have look at all the questions and threads i could find but did'nt get any answers. here is a repository with my custom filter code including the generated js library
please help, if more clarifications or details are needed request them.
UPDATE
i wrote to one of the kurento developers that recommended i use kurento-media-server --version to get the actual list of loaded modules, this is a followup to that:
kurento-media-server --version returns:
Version: 6.7.0~1.g6ebaa27
Found modules:
Module: 'backgroundremoval' version '0.0.1~3.g045ef96'
Module: 'bgremoverfilter' version '0.0.1~0.g3a1e793'
Module: 'chroma' version '6.6.1~3.g6df8f1d'
Module: 'core' version '6.6.3'
Module: 'elements' version '6.6.3'
Module: 'filters' version '6.7.0~1.g0314843'
Module: 'harel' version '0.0.1~0.gaec7e6d'
so yes backgroundremoval, bgremoverfilter and harel are the custom modules i have created and they are on the list.
i still dont know why when i use a camelcase name as bacgroundRemoverFilter i cant get the module to load in javascript althoug the generated code is loaded on my node.js project when it tries to create the filter the app sends the "module not installed error"
so i started using all minus names, for my module "harel" this gets loaded with no problems and when i try to create the media element with
pipeline.create('harel.harel')...
the filter gets created but them fails when a try to connect it to a webrtcEnpoint with
filter.connect(webRtcEndpoint, function(error) {
if (error) {
return callback(error);
}
return callback(null);
});
it returns the error: SyntaxError: sink param should be a MediaElement, not harel
turns out that error is send by /node_modules/kurento-client-core/lib/abstracts/MediaElement.js:489:3 when calling a function Checktype
checkType('MediaElement', 'sink', sink, {required: true});
so i added a console.log() after the filter its created to see what was different between the chroma filter and my custom filter, this is the result:
harel {
domain: null,
_events:
{ removeListener: [Function],
newListener: [Function],
_describe: [Function: bound emit],
_rpc: [Function: encodeRpc],
release: { [Function: bound onceWrapper] listener: [Function] } },
_eventsCount: 5,
_maxListeners: undefined,
id: 'ad5e2447-3801-4d96-81b4-c40390b16248_kurento.MediaPipeline/18e8c6b9-df88-4d52-851c- 8c664a26ee3d_harel.harel' }
ChromaFilter {
domain: null,
_events:
{ removeListener: [Function],
newListener: [Function],
_describe: [Function: bound emit],
_rpc: [Function: encodeRpc],
release: { [Function: bound onceWrapper] listener: [Function] } },
_eventsCount: 5,
_maxListeners: undefined,
id: '97f370b5-81ae-45e1-a979- dab6c1c4cd28_kurento.MediaPipeline/06658282-67bf-47bc- b006-9f0dbae01767_chroma.ChromaFilter' }
both objects have the same properties excetp for the id. so how come the same function works with ChromaFilter bu not with harel if the object passed is almost the same. This is were i am now. will keep digging.
The problem with my process was that i used npm link to add the generated client-js code to my node.js app. For that to work i had to install the kurento-client package on the client-js folder and when my app ran it will generate the custom plugin with a different kurento-client than the one it was using.
so even thought the Chroma-filter and my harel module looked the same they were from two different kurento-client classes.
instead of using npm-link i just copied the generated js-client code inside my node-modules folder and that did the trick.
hope this is usefull to people that find this error.

Running a durandal app with the main-built file results does not work

I am having some problems with the optimized code that weyland generates. Here is what I did so far:
This is my project structure:
This is my weyland-config file:
exports.config = function(weyland) {
weyland.build('main')
.task.uglifyjs({
include:['www/**/*.js', 'www/js/durandal/**/*.js']
})
.task.rjs({
include:['www/**/*.{js,html}', 'www/js/durandal/**/*.js'],
loaderPluginExtensionMaps:{
'.html':'text'
},
rjs:{
name:'libs/require/require', //to deploy with require.js, use the build's name here instead
baseUrl : '../www/js',
paths : {
'text': 'libs/require/text',
'durandal': 'durandal',
'plugins': 'durandal/plugins',
'transitions': 'durandal/transitions',
'knockout': 'empty:',
'bootstrap': 'empty:',
'jquery': 'empty:'
},
inlineText: true,
optimize : 'none',
pragmas: {
build: true
},
stubModules : ['text'],
keepBuildDir: true,
out:'../www/js/main-built.js'
}
});
}
This is what I added in my index.html file to run the generated file instead of the one created by me:
<script src="js/main-built.js"></script>
I have also tryed using:
<script data-main="js/main-built" src="js/libs/require/require.js"></script>
This is what I had before:
<script data-main="js/main" src="js/libs/require/require.js"></script>
After I run weyland build on the command line the main-built file get's generated without any errors.
If I try to run the app the applycation freezez at the start screen as if the the app.start() method never get's called and no errors are being displayed.
I have checked chrome debugging tools the main-built file is recieved by the client it just seems it does nothing.
What am I doing wrong?
EDIT
I have also tryed building using almond-custom and ading this aditional configuration:
insertRequire:['main']
wrap:true
When I try to run the app I get this error:
Uncaught Error: main missing durandal/app
In my main fail I am loading the 'durandal/app' threw require js and for some reason it can not find it anymore