Inside my main file, I have
const loadWorker = async () => {
const SyncWorker = await import("$lib/canvas.worker?worker");
syncWorker = new SyncWorker.default();
syncWorker?.postMessage({});
};
Then in my unmount I have
onMount(() => {
console.log("Canvas: mounted");
loadWorker();
});
Then in my canvas.worker.ts file, I have a simple
onmessage = () => {
console.log("Hello from the worker!");
};
export {};
This message prints successfully in Chrome, but in firefox all I get is
SyntaxError: import declarations may only appear at top level of a module
Is this because the worker is stored on my local system, and maybe there's a special flag to allow loading of system files as workers (as that seems it may be a security concern)? Firefox docs say that my browser should support workers.
Well, I should've read the documentation better.
service workers only work in the production build, not in development.
To test it locally, use vite preview
https://kit.svelte.dev/docs/service-workers
Or in my case, "npm run build && npm run preview" worked.
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.
I'm trying to get the commit information details in the Cypress Dashboard. I haven't been able to accomplish just yet, but I have made some advances though...
I'll describe what I have done so far:
Installed the commit-info npm package by running the command:
npm install --save #cypress/commit-info
Import the plugin in plugin/index.js file like so:
const { commitInfo } = require('#cypress/commit-info');
module.exports = on => {
on('file:preprocessor', file => {
commitInfo().then(console.log);
});
};
Now I get all the information, author, branch, commit & message, in the terminal!:)
However, I still don't have the information details linked to my Cypress Dashboard.
This is what I currently get:
What're the next steps? The documentation is not clear to me...
In our case we run everything inside a docker container. We copy our code into the container but do not copy the .git directory, it's large, time consuming, and we don't need it. #cypress/commit-info assumes there is a .git directory, so since there isn't, it doesn't work.
We overcame this by setting the values cypress expects explicitly in the cypress run command in our Jenkinsfile:
def commitMessage = sh(script:"git log --format=%B -n 1 ${env.GIT_COMMIT}", returnStdout:true).trim()
def commitAuthor = sh(script:"git log --format='%an' -n 1 ${env.GIT_COMMIT}", returnStdout:true).trim()
def commitEmail = sh(script:"git log --format='%ae' -n 1 ${env.GIT_COMMIT}", returnStdout:true).trim()
def cypressVars = "COMMIT_INFO_BRANCH=${env.GIT_BRANCH} COMMIT_INFO_SHA=${env.GIT_COMMIT} COMMIT_INFO_REMOTE=${env.GIT_URL} COMMIT_INFO_MESSAGE=\"${commitMessage}\" COMMIT_INFO_AUTHOR=\"${commitAuthor}\" COMMIT_INFO_EMAIL=${commitEmail}"
// call cypress however you do and include cypressVars as part of the command
While using Vue.js 2.3.4 in development on Chrome 58.0.3029 I keep getting this error in developer tools console:
Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING
:8080/__webpack_hmr
Everything appears to be working OK, but after updating everything I still see this error and wondered if it's something I need to pay attention to.
Also, I want to clear out any unnecessary errors.
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {},
heartbeat: 2000
})
Worked for me, and also this:
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: false,
heartbeat: 2000
})
and you must run again npm run dev command.
Thanks to #Jack Barham
Note: im using the PWA Template.
There's a pull request to fix this in the webpack template repo, but it hasn't been merged as of this writing.
I've implemented the fix from the PR in several projects and it seems to work fine.
In build/dev-server.js, add heartbeat: 2000 to the options object passed to require('webpack-dev-middleware') so it ends up looking like:
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {},
heartbeat: 2000
})
Edit: it seems as though a newer identical PR was just accepted/merged.
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.