I recently built a library with Rollup that has a few non-usual bits. That includes for instance, loading up a wasm module, workers with importScripts and a few occurences of eval() in the global scope.
Now I used the rollup-starter-app to create a demonstrator and client app for that library. The repo is https://github.com/frantic0/sema-engine-rollup
I managed to get everything working, after hitting a few walls and adding the following rollup plugins
import { wasm } from "#rollup/plugin-wasm";
import workerLoader from "rollup-plugin-web-worker-loader";
import dynamicImportVars from "#rollup/plugin-dynamic-import-vars";
import copy from "rollup-plugin-copy";
However, in the build output, I'm getting this massive log of what seems to be some encoding...
I'm not sure where this log is coming from and it is so massive that it clears out all the information of the build in the terminal...
What is the best way to tackle this issue and how to debug it effectively?
based on the suggestion #lukastaegert on the rollup issues, one solution is to redirect stderr into a file to read the log.
To do that you can add the following to your rollup command
"rollup -cw 2>err.log 1>out.log"
this allows to further inspect the build log but doesn't solve the error
[EDIT]
After a bit of peeking around Rollup's github issues and source, I found the warning categories and how to deactivate warnings.
Basically, we need to add a function onwarn to rollup.config.js. The first code section below shows the function. The second one show where we should add it on the rollup.config.js
const onwarn = (warning) => {
// Silence warning
if (
warning.code === 'CIRCULAR_DEPENDENCY' ||
warning.code === 'EVAL'
) {
return
}
console.warn(`(!) ${warning.message}`)
}
export default {= {
inlineDynamicImports: !dynamicImports,
preserveEntrySignatures: false,
onwarn,
input: `src/main.js`,
output: {
I have an Electron Forge config file set up with many options and it all works automagically and beautifully (thanks Forge team!!). But I have found certain situations where I might want to handle a bare npm run package differently than a full npm run make (which as I understand it runs the package script as part of its process). Is there any way to programmatically detect whether the package action was run direct from the command line rather than as part of the make process, so that I can invoke different Forge configuration options depending? For example sometimes I just want to do a quick build for local testing and skip certain unnecessary time-consuming steps such as notarizing on macOS and some prePackage/postPackage hook functions. Ideally I'm looking for a way to do something like this in my Forge config file:
//const isMake = ???
module.exports = {
packagerConfig: {
osxNotarize: isMake ? {appleId: "...", appleIdPassword: "..."} : undefined
},
hooks: {
prePackage: isMake ? someFunction : differentFunction
}
}
You can do it by process.argv[1]:
let isMake;
if (process.argv[1].endsWith('electron-forge-make.js') {
isMake = true;
} else {
isMake = false;
}
module.exports = {
// ...
}
When calling process.argv, it returns an array with two strings: The first one with node.js directory and the second one with electron forge module directory.
The make module ends with electron-forge-make.js and package module ends with electron-forge-package.js. So you can look at the end of it and determine whether it's package or make.
The following problem only exists on Windows, on macOS the code below works as expected.
So, I am on Windows 10 (v1909) and installed nsfw in my electron program and can't make it work. I installed it with the following command:
npm install nsfw --save
> nsfw#2.0.0 install C:\Users\daniel\Desktop\my-foo-example\node_modules\nsfw
> node-gyp rebuild
C:\Users\daniel\Desktop\my-foo-example\node_modules\nsfw>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )
Building the projects in this solution one at a time. To enable parallel build, please add the "-m" switch.
NSFW.cpp
Queue.cpp
NativeInterface.cpp
Controller.cpp
Watcher.cpp
win_delay_load_hook.cc
Creating library C:\Users\daniel\Desktop\my-foo-example\node_modules\nsfw\build\Release\nsfw.lib a
nd object C:\Users\daniel\Desktop\my-foo-example\node_modules\nsfw\build\Release\nsfw.exp
nsfw.vcxproj -> C:\Users\daniel\Desktop\my-foo-example\node_modules\nsfw\build\Release\\nsfw.node
+ nsfw#2.0.0
I call nsfw the following way. I expected "start watching" to be printed, but nothing happens. Also no file changes in the given directory gets printed out. The directory does exist. Am I missing something?
var watcher2;
app.whenReady().then(() => {
createWindow();
nsfw(
"C:\\Users\\daniel\\Desktop\\foo",
function (events) {
console.log(events);
},
{
debounceMS: 250,
errorCallback(errors) {
console.log(errors);
},
}
)
.then(function (watcher) {
watcher2 = watcher;
console.log("start"); <--- get's executed
return watcher.start();
})
.then(function () {
console.log("start watching"); <--- DOES NOT get triggered
// we are now watching dir for events!
});
});
I had a similar issues, especially given the fact that the stop call is part of the example in the repo. However, in your case it seems you don't have a .catch which would reveal the actually underlying error.
Here's my previous question on this:
Unable to resolve module in React Native - however I want to make the module optional
And here is the resource I was pointed to:
How to require module only if exist. React native
This is my current code:
let GoogleSignin;
const GoogleSigninInit = '#react-native-community/google-signin';
try {
GoogleSignin = require.call(null, GoogleSigninTest);
} catch (e) {
console.log("Google Signin is not found");
}
let FBSDK;
const FBSDKInit = 'react-native-fbsdk';
try {
FBSDK = require.call(null, FBSDKInit);
} catch (e) {
console.log("Facebook SDK is not found");
}
let InAppBrowser;
const InAppBrowserInit = 'react-native-inappbrowser-reborn';
try {
InAppBrowser = require.call(null, InAppBrowserInit);
} catch (e) {
console.log(e);
console.log("InApp Browser is not found");
}
let AppleAuth;
const AppleAuthInit = '#invertase/react-native-apple-authentication';
try {
AppleAuth = require.call(null, AppleAuthInit);
} catch (e) {
console.log("Apple auth is not found");
}
However, when I try to use react-native-inappbrowser-reborn, which is absolutely in my node_modules folder, I get the following error:
Unknown named module: "react-native-inappbrowser-reborn"
So the code I have has definitely gotten rid of the error from optional modules, however it doesn't seem to actually load them.
Is there a way to actually load the modules that I have in node_modules?
EDIT:
Here is the full stack trace for this particular module, but again, it happens with other modules too.
Unknown named module: "react-native-inappbrowser-reborn"
- node_modules/metro/src/lib/polyfills/require.js:95:12 in metroRequire
- node_modules/react-native-keycloak-social-login/src/Login.js:25:25 in <global>
- node_modules/metro/src/lib/polyfills/require.js:321:4 in loadModuleImplementation
- node_modules/metro/src/lib/polyfills/require.js:201:20 in guardedLoadModule
- node_modules/metro/src/lib/polyfills/require.js:128:6 in metroRequire
- node_modules/metro/src/lib/polyfills/require.js:657:4 in runUpdatedModule
- node_modules/metro/src/lib/polyfills/require.js:532:23 in metroHotUpdateModule
- node_modules/metro/src/lib/polyfills/require.js:53:15 in define
* http://127.0.0.1:19001/node_modules/react-native-keycloak-social-login/src/Login.bundle?platform=ios&dev=true&minify=false&modulesOnly=true&runModule=false&shallow=true:1:1 in eval
- node_modules/metro/src/lib/bundle-modules/injectUpdate.js:65:4 in inject
According to README, the installation is not completely automatic and you need to follow further process depending on the platform and react-native version.
If you have followed the above, then try deleting your node_modules, running npm cache clean and reinstalling node_modules and running the app again.
I'm following the example exactly as shown in https://github.com/marcshilling/react-native-image-picker using react-native-image-picker, via terminal with react-native run-ios and coding via Atom editor.
I did npm install react-native-image-picker#latest --save and currently the dependency in package.json shows: "react-native-image-picker": "^0.22.8",
And I clicked a button to trigger the imagePicker but I am getting the error: Cannot read property 'showImagePicker' of undefined.
What am I doing wrong?
Here is the code
import ImagePicker from 'react-native-image-picker'
var Platform = require('react-native').Platform
var options = {
title: 'Select Avatar',
customButtons: [
{name: 'fb', title: 'Choose Photo from Facebook'},
],
storageOptions: {
skipBackup: true,
path: 'images'
}
}
export default class chooseImage extends Component {
constructor() {
super()
this.state = {
avatarSource: "",
}
}
_uploadImage() {
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
// You can display the image using either data...
const source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};
// or a reference to the platform specific asset location
if (Platform.OS === 'ios') {
const source = {uri: response.uri.replace('file://', ''), isStatic: true};
} else {
const source = {uri: response.uri, isStatic: true};
}
this.setState({
avatarSource: source
})
}
})
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight
onPress={this._uploadImage}
underlayColor='transparent'
>
<Image
source={this.state.avatarSource} style={styles.uploadAvatar}
/>
</TouchableHighlight>
</View>
)
}
}
EDIT
When I console.log(ImagePicker)
use manual installation
set permission
/AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
cannot read property y of undefined means you have a statement x.y
such that x is undefined. in this case, x is ImagePicker.
My best guess is that your import statement causes the issue.
try this:
var ImagePicker = require('react-native-image-picker');
instead of
import ImagePicker from 'react-native-image-picker'
Which is also what the example suggests.
if you want to stick with the import statement,
try this:
import * as ImagePicker from 'react-native-image-picker'
Which imports the module as ImagePicker and puts it inside the scope.
For more info, see: MDN on import statement
I have been working for hours to solve this problem! Finally after adding correctly these lines in MainApplication.java it worked as a charm. Do not forget to rebuild the project.
it seems like IMagePicker is not defined.
Have you tried using
var ImagePicker = require('react-native-image-picker');
instead of the first line?
Hi there are few things that you can try: Run react-native link
Make sure you already completed this step
http://prntscr.com/hftr17
If not: your last chance is remove completely your code. Clone a new one.
I was successfully make it work by follow those.
Hope it can give you something.
Rebuild your app. Run the command react-native run-ios and react-native run-android.
Rebuilding your app will just mean you'll get the same error.
You need to go through Xcode for iOS and edit your settings.gradle manually for this to work:
https://github.com/react-community/react-native-image-picker
You don't need to do the steps for both Android and iOS, but the steps outlined for either platform are crucial
So unless you have already executed react-native link, you will need to go through each numbered steps and make sure your binaries are properly linked.
If you are using xcode and getting this error on simulator or real device make sure after installing and react link command you follow manual instructions. as described ie.
In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...> .
Go to node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj
Add RNImagePicker.a to Build Phases -> Link Binary With Libraries
For iOS 10+, Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, NSPhotoLibraryAddUsageDescription and NSMicrophoneUsageDescription (if allowing video) keys to your Info.plist with strings describing why your app needs these permissions.
Note. = RNImagePicker.a is now libRNImagePicker.a
and make sure you add this in your project build phase the lib's build phase itself.
Then you may compile and run it.
Note :
After installation you have to restart the project as react-native run-ios or
react-native run-android
May be u installed the picker but didn't restart the packager
: )
If you are using xcode and getting this error on simulator or real device make sure after installing and react link command you follow manual instructions. as described ie.
In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...> .
Go to node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj
Add RNImagePicker.a to Build Phases -> Link Binary With Libraries
For iOS 10+, Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, NSPhotoLibraryAddUsageDescription and NSMicrophoneUsageDescription (if allowing video) keys to your Info.plist with strings describing why your app needs these permissions.
Note. = RNImagePicker.a is now libRNImagePicker.a and make sure you add this in your project build phase the lib's build phase itself.
Then you may compile and run it.
As per your first comment you mentioned that you are not using Xcode you are using Atom and Terminal. In most of the cases only npm install will be enough but there are some platform specific cases that can be achieved either by linking it using react-native link or by following the manual installation steps provided in the document. if you are not using Xcode then its not possible for you to link this library completely for IOS platform. Make sure you use Xcode and follow the manual steps or else react-native link to solve your issue.
I had the same problem and in iOS it was due to the permission missing, even in the simulator. See the permissions here:
https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Install.md
I just missed "NSPhotoLibraryAddUsageDescription" and it was enough to get the "Cannot read property 'showImagePicker' of undefined" error.