I am using Skylink for video calling and I want to use in a react project. I know how to use it with Vanilla JavaScript as their demo project is at codepen
But when I try to use it with react I am getting some errors. Here is how I tried:
Installed the package from npm using Yarn.
Imported the package import SkyLink from 'skylinkjs'
Then called the function constructor const skylink = new SkyLink();
But I get the following error:
Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_3_skylinkjs___default.a is not a constructor
If I try to import like this:
import {SkyLink} from 'skylinkjs';
const skylink = new SkyLink();
then the error is
Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_3_skylinkjs__.SkyLink is not a constructor
and If I try to import all from the module and then call the function costructor:
import * as SkyLink from 'skylinkjs';
const skylink = new SkyLink();
the error will be this Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_3_skylinkjs__ is not a constructor
Can you please tell me what am I doing wrong?
You have a typo. Either of the following would work.
import { Skylink } from 'skylinkjs';
const skylink = new Skylink();
or
import skylinkjs from 'skylinkjs';
const skylink = new skylinkjs.Skylink();
Related
I am trying to include the Vuetify library in an existing Vue 3 project, but I am having some problems. Here is the error message that appeared after compiling my project:
vuetify.js?ce5b:42021 Uncaught TypeError: Cannot read properties of undefined (reading 'extend')
...
main.js:
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
const app = createApp(App)
app.use(Vuetify)
app.mount('#app')
All imports of the Vuetify correspond to the official documentation.
Are these problems due to the version of my Vue project?
For Vue3 you need to install vuetify#^3.0.1
import it
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
Then create it
const vuetify = createVuetify()
and then use it
app.use(vuetify)
I created a VueJs project and wanted to implement EventBus. In my eventBus.js file it contains this code:
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
export const EventBus = new app;
app.mount('#app')
Some of the tutorials, they used import Vue from 'vue' and applied export const EventBus = new Vue(); and it all worked fine at their ends. I even called my EventBus the way they implemented it here.
But it still threw some errors in my console saying this below:
Uncaught TypeError: app is not a constructor
at eval (eventBus.js?0c80:5:1)
at ./src/eventBus.js (app.js:239:1)
at __webpack_require__ (app.js:995:33)
at fn (app.js:1251:21)
at eval (index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/LoginButton.vue?vue&type=script&lang=js:5:67)
at ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/LoginButton.vue?vue&type=script&lang=js (app.js:30:1)
at __webpack_require__ (app.js:995:33)
at fn (app.js:1251:21)
at eval (LoginButton.vue?vue&type=script&lang=js:5:214)
at ./src/components/LoginButton.vue?vue&type=script&lang=js (app.js:470:1)
Is it the way I implemented it wrong in my eventBus.js file? I even tried to use import Vue from 'vue' and applied export const EventBus = new Vue();and throw this error in my console:
Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
at eval (eventBus.js?0c80:3:1)
at ./src/eventBus.js (app.js:239:1)
at __webpack_require__ (app.js:995:33)
at fn (app.js:1251:21)
at eval (index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/LoginButton.vue?vue&type=script&lang=js:5:67)
at ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/LoginButton.vue?vue&type=script&lang=js (app.js:30:1)
at __webpack_require__ (app.js:995:33)
at fn (app.js:1251:21)
at eval (LoginButton.vue?vue&type=script&lang=js:5:214)
at ./src/components/LoginButton.vue?vue&type=script&lang=js (app.js:470:1)
Using a JS sdk of Icon a blockchain. Trying to using the SDK API calls and I'm having issues import or require
When I use Import an error is thrown SyntaxError: Cannot use import statement outside a module
When I use require an error is thrown ReferenceError: HttpProvider is not defined
Below is the link to Icon Icx Github
Icon GitHub
const IconService = require('icon-sdk-js');
//import IconService from 'icon-sdk-js';
const provider = new HttpProvider('https://bicon.net.solidwallet.io/api/v3');
const iconService = new IconService(provider);
const totalSupply = iconService.getTotalSupply().execute();
console.log(totalSupply);
In NodeJS you use require to "import" node modules and dependencies to your project
const IconService = require('icon-sdk-js');
Regarding this line const provider = new HttpProvider('https://bicon.net.solidwallet.io/api/v3');
Where are you importing HttpProvider from? HttpProvider is not built in Javascript library.
If it is a node module, you have to do something similar
const HttpProvider = require('HttpProvider'); (in your question you don't specify what HttpProvider is)
I think you might use IconService.HttpProvider('the url'); to use the constructor
In typescript I am using flatbuffers like this:
import {flatbuffers} from 'flatbuffers';
const builder = new flatbuffers.Builder(1);
then I compile to js to be use with react-native:
const flatbuffers_1 = require("flatbuffers");
const builder = new flatbuffers_1.flatbuffers.Builder(1);
but I get error:
undefined is not an object (evaluating 'new flatbuffers_1.flatbuffers.Builder')
What happen?
Not a direct solution, but I'm using the more modern approach/ ES6 imports, and its working fine when I do the following:
import {flatbuffers} from "flatbuffers";
const builder = new flatbuffers.Builder(6000);
// ...
Though I had to modify the code gen output in the generated class from import * as flatbuffers from 'flatbuffers'; to import {flatbuffers} from 'flatbuffers';
I am getting error while using html-to-react parser in ReactJS
I am getting an error
" _htmlToReact.HtmlToReactParser is not a constructor".
I have imported the 'HtmlToReactParser' as
import {HtmlToReactParser} from 'html-to-react'
With the ES6 style of import you need to import it as
import {Parser as HtmlToReactParser} from 'html-to-react'.
Which is an equivalent of
var HtmlToReactParser = require('html-to-react').Parser;
in commonJS as was metioned in the DOCS