I have compiled a c code to js code using EMScripten using this command in command prompt:
emcc [xxx.c] -o [xxx.js] -s EXPORTED_FUNCTIONS="['function1']"
and when I import Module from xxx.js within my index.js file, Module object is empty. Not sure if I need to change something within the generated file or if I did something wrong..
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Module from './xxx';
console.log(Module) // gives me {}
any suggestion will be appreciated.
thanks :)
Before you import your emscripten js file, you will need to create a "Module" object and implement a property(function) "onRuntimeInitialized".
Only after you get a callback on this function you can expect the Module object to be non-empty.
window.Module = {
onRuntimeInitialized : function() {
console.log("Emscripten Ready!");
var event = new Event('emReady');
// Dispatch the event.
document.dispatchEvent(event);
}
};
// Now register for this event in your React code and only call Module functions when this event has been received.
I was having the same issue and found an emcc option that solved it: -s MODULARIZE=1
MODULARIZE puts all the output into a function so when you call Module, you can call it as a function (Module()) and not receive an empty object.
For more details, here is a link to a more in-depth answer of mine:
https://stackoverflow.com/a/54117913/4848700
Related
In my nuxt.js application, I have a script that imports an NPM package which is only compatible with browser contexts (it references document, location, window, etc.)
Is there a way to exclude this from SSR?
import thing from "#vendor/thing"; // causes `document not defined` error
export default showThing(){
if (process.client) {
thing();
}
}
I can use the method with process.client but this file is still imported in my components.
You could import it dynamically rather than in every context.
As explained in my answer here: https://stackoverflow.com/a/67825061/8816585
In your example, that would be something like this
export default showThing(){
if (process.client) {
const thing = await import('#vendor/thing')
thing()
}
}
I've moved my code of a custom React Native component to it's own file such as this:
import React from 'react';
import { StyleSheet, Text, View } from "react-native";
export default class MyButton extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Text style={{fontSize: 20, color: "#008000"}}>Foo Bar</Text>
);
};
};
In App.js I can refer to that file that contains that code. The framework does not complain:
import { MyButton } from "./MyButton";
But as soon as I include MyButton in the App rendering function I receive the following error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
The rest of the error message is completely useless.
I did some searches on the web to learn what could have caused that error. But none of all hints I found seemed to be related to my case here. For example I use import React from 'react'; which is advised by some answers even here on stack overflow, but still this doesn't work. (See: Custom component undefined in React Native)
If I move the code to App.js everything works fine. If I move it to another file things don't work. What do I need to change in that file in order to successfully have a component in that file? And include that in similar way as those native components in my App.js?
Thank you for your help!
Your import statement is incorrect.
import { MyButton } from "./MyButton";
This import statement imports a named export called MyButton from the ./MyButton module. However, in your MyButton file you are default exporting the MyButton component. What you want to do is:
import MyButton from "./MyButton";
which imports whatever is exported by default from the module, in this case the MyButton component.
I'm new to svelte and I am trying to use an installed node module in my dependancies called momentum-slider. In the script tags of my svelte component I have:
import MomentumSlider from "../../node_modules/momentum-slider";
let slider = new MomentumSlider({
el: ".ms-container",
});
In my component's html markup I have the suggested markup as shown in the tutorial at https://scotch.io/tutorials/building-a-fancy-countdown-timer-with-momentumsliderjs
However, I am getting a typeError in the browser console:
I am new to development in general and I am not sure if this is a problem with momentum-slider or an error on my part. Any insights would be much appreciated.
Not sure how to use this library but you should take care of 2 things. First import your package like the following:
import MomentumSlider from "momentum-slider";
Second you need to initialise the MomentumSlider class when the component is mounted using onMount:
import { onMount } from "svelte";
import MomentumSlider from "momentum-slider";
let slider;
onMount(() => {
slider = new MomentumSlider({
el: ".ms-container"
});
});
If you have installed the package properly: npm install momentum-slider
the package is listed in your package.json.
When this fits, you just have to import:
import MomentumSlider from "momentum-slider";
I am trying to develop native module in android for react native.
Exactly followed the link at
https://facebook.github.io/react-native/docs/native-modules-android.html#content
but it is giving me error
/ReactNativeJS: undefined is not an object (evaluating '_ToastAndroid2.default.show')
I have implemented ToastAndroid.js
'use strict';
/**
* This exposes the native ToastAndroid module as a JS module. This has a
* function 'show' which takes the following parameters:
*
* 1. String message: A string with the text to toast
* 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or
* ToastAndroid.LONG
*/
import { NativeModules } from 'react-native';
module.exports = NativeModules.ToastAndroid;
and then in other Jsfiles tried to import using
import ToastAndroid from './ToastAndroid';
change the name of Module "ToastAndroid" because ToastAndroid module is already in react-native package.
You are importing wrong. module.exports as the name implies exports your module to one of many exports that the file ToastAndroid.js can have. It's called a named export.
The correct import will therefore be import {ToastAndroid} from './ToastAndroid';
If you want to use import ToastAndroid from './ToastAndroid';
You should write export default NativeModules.ToastAndroid;
See this related answer for more information.
I have installed toastr in my Aurelia app. I am able to import and use it in different views, but I can't figure out how to set/modify its global options.
Ideas?
The most trivial place to do that is in you application constructor. You must also have your toaster script loaded at this point. Here's how your app.js could look like:
import {Router} from 'aurelia-router';
import toastr from 'toastr';
export class App {
static inject() { return [Router]; }
constructor(router) {
toastr.options.closeButton = true;
// ... setup your routing etc
}
}
I assume you already have your toaster script loaded at this point. You can also move toastr initialization to any other Aurelia constructor, or any other place, I don't see any technical restrictions.