Nanoid library not working as a thingsboard resource - javascript

I need to generate a 10 character id for a project in Thingsboard, i'm facing a problem with the nanoid lib. I need to use the cdnjs so i've tried first with the 4.0 version (the index.browser.min.js one) and it's giving me this problem as soon as i click on execute. "Unexpexted token export" error.
So i tried with the 3.3.4 version Cannot use import statement outside a module.
Thingsboard lets you program in javscript and gives you a space for cdnjs to import library/resources Thingsboard.
I'm in a clean widget creation so i don't think something is interfering, i've tried with other lib (like uuid) and it works just fine. I've even tried with the html but the outcome it's the same.
Does somebody knows why it's doing like this and how to fix it?

self.onInit = function() {
import('https://cdn.jsdelivr.net/npm/nanoid/nanoid.js').then(
nanoid => {
console.log(nanoid.nanoid());
}
);
}

Related

Import gives undefined in Typeorm

I am a newbie at using typeorm. The project that I am working on I created all entities. Then, I wanted to make imports cleaner. The code crashes due to the fact that I made it imports like the below example.
I export the files from 'entities/index.ts'
import Account from './Account';
import Order from './Order';
export {
Account,
Order,
};
Thus, I can import all entities once.
import { Account, Order } from '#entities/index'
PS: The above example is a dummy in order to show the case.
The problem is that I faced. When I run the application it shows me undefined. I tried to direct import like
import Account from '#entities/Account';
Then it works. But I don't want to make like that. If I do like that, the imports will look bad.
You can see below in the example how I debug it. (BaseEntity gives undefined)
User.ts
BaseEntity.ts
entities/index.ts
Result
Thanks for your contribution.
The problem seems to be a javascript circular dependency, rather than a TypeORM problem. This article seems to get at the core problem of dependency load order when there is a cyclic dependency. Circular Dependency Issues So the load order might be Account, BaseEntity, User and User has not fully loaded by the time Account needs it.

How to initialize a library in react-native

I'm trying to work with this react-native library, and in the documentation it says this:
Initialize Library
Somewhere high up in your project and way before calling any other method exposed by this library, your index file or equivalent is a good spot, ensure you initialize the library with your public key as follows:
import RNPaystack from 'react-native-paystack';
RNPaystack.init({ publicKey: 'YOUR_PUBLIC_KEY_HERE' });
How do I do this, without getting null object is not a function.
In my app.js I tried it with useEffect, tried with componentwillmount , tried several ways, same error.
I feel I'm doing it wrongly.
Can someone tell how to initialize a library properly in react native.
Thanks :)
This is most likely happening because you haven't linked the native modules properly. That's expected as you mentioned you're using Expo, which doesn't allow you to add custom native code. If you want to use this library, you'll have to eject from Expo. See the docs.

How to use i18n-iso-countries in React?

I'm working on a React app and trying to use the i18n-iso-countries package to get a countries object in English which has keys as iso codes and values as the country names. This is easy in node, as I've verified with a simple script running the way the i18n-iso-countries npm docs show, like this:
const countries = require("i18n-iso-countries");
console.log(countries.getNames('en'));
But when I do this in my react app (made with create-react-app) like this ...
import countries from "i18n-iso-countries";
console.log(countries.getNames('en'));
...I get an empty object back. When I log just countries (console.log(countries)) in React, I see the function "getNames" on it and the other functions the docs mention, so I'm not sure what gives.
Just needed to add this line!
countries.registerLocale(require("i18n-iso-countries/langs/en.json"));
Not sure why this needs to be added in React (and Angular - where I found answer How to use i18n-iso-countries in Angular 6 - and probably other ui libraries/frameworks) so if someone could explain that, that would be cool, but hey, at least it's working!
It is a little bit to late. But to answer jupiterjelly this line is needed for browser environment, so that your bundler knows that it needs to put this file in the bundle

Why console log on library doesn't work, when it has been imported to a different react component?

I have a library 'some-library' where i have written a console.log("message from some library") statement in 'some-component.js'. I have used uglifyjs in this library with default settings. When I import 'some-component' from 'some-library' i do not see 'message from some library'.
Request you to please help me in this?
I have tried with npm link, it doesn't work. Manually copy pasted the libraries(pretty similar to link) in the calling component. But doesn't work. Whereas if i put the source code of the library in the calling component. I see the message.
Sorry, got this sorted. I had used sumologic library and had replaced console log instead of augmenting it. The issue is now sorted.

ES6: What does "import $ from 'jquery'" really means?

I assumed at first that it simply means, load the jQuery module and initialize it in a variable called $.
But then, by using Atom with the atom-typescript, I got an error saying that it "Cannot find module 'jquery'". Even though all the code works in the browser, it looks like atom-typescript can't resolve anything looking like import x from y.
Now, looking at ES6 doc, I found out that you import a class/function from a module. The meaning is totally different, and it makes sense with for example this:
import { Component } from 'angular2/core';
But then what does it mean in the case of jQuery?
I am probably mixing different issues in the same one but any explanation would clear this confusion, so thanks a lot in advance :)
The statement import $ from jquery pretty much amounts to dependency injection. Just like one would write import React from 'react' to give oneself access to the React library within a file, so to can one write import $ from jquery. (In case it's throwing you off, the dollar sign is used because jQuery and its methods are accessed using the dollar (a.k.a. jQuery) operator.
As for the errors being thrown, that could be several things:
If you separately installed jQuery as a dependency in your package.json file as well as included a <script> tag from a jQuery CDN, this error will be thrown. If you're usage of jQuery is through NPM, then the import $ from jquery syntax is correct/necessary. If you intend to use jQuery through a CDN (as I would recommend), the import statement is unnecessary. (Since you've included that script tag in your index.html, you have access to jQuery and its library throughout the scope of your application). Do not, however, do both.
Also note that in the case of the import { Component } from 'angular2/core'; statement, something slightly different is going on. Namely, one is importing the named export Component, as per the (AMD specification. You can think of it, in this case, as importing only a part of the larger Angular2 core library when the entire library would be unnecessary.
Just to be sure, check that you have actually given yourself access to jQuery through either a CDN or by installing it as an NPM dependency.

Categories

Resources