I have installed the package react-native-image picker:
npm i react-native-image-picker --save
And I have also linked it to my project:
react-native link react-native-image-picker
And when I try to import the module and use it:
import ImagePicker from 'react-native-image-picker';
ImagePicker.launchImageLibrary(options, (response) => {
// code here
}
I receive this following error:
typeError: Cannot read property 'launchImageLibrary' of undefined
What went wrong here?
You should carefully check the newest documentation of this npm package as it was migrated to newer version. The old 2.x.x version is deprecated, as written in the GitHub page of the package, thus names of key modules might have changed...
Below is the solution for it,
import {launchImageLibrary} from 'react-native-image-picker';
const changePhoto = () => {
const options = {
noData: true,
};
launchImageLibrary(options, (response) => {
console.log(response);
});
};
<TouchableOpacity onPress={changePhoto}>
<Text>Change Photo</Text>
</TouchableOpacity>
At the place of
import ImagePicker from 'react-native-image-picker';
replace with
var ImagePicker = require('react-native-image-picker');
and run the application again.
For 3.x version, you can directly import the function like
import {launchImageLibrary} from 'react-native-image-picker';
In an Expo project, I still got the same error, like this issue (since lauchImageLibrary comes from NativeModules.ImagePickerManager). But it works fine in the project initialized with React Native CLI.
For version 3.x, let run npx pod-install then get the function by that way import { launchImageLibrary } from 'react-native-image-picker';
Related
I've got a file called "globalHelper.js" like this:
exports.myMethod = (data) => {
// method here
}
exports.myOtherMethod = () => { ... }
and so on...
I import my Helper in other files like this:
import helper from "../Helper/globalHelper";
Now there is the problem:
In the past, everything worked with that when running my build-script:
"build": "GENERATE_SOURCEMAP=false react-scripts build"
but for some reason, when I run "npm run build", I get the error:
Attempted import error: '../Helper/globalHelper' does not contain a default export (imported as 'helper')
However, when I simply start my development server (npm start), everything works just fine.
I already tried to import like import { helper } from "../Helper/globalHelper";, but that did not work either.
Does someone know how to solve that?
try exporting like this with ES6 syntax
export const myOtherMethod = () => { ... }
then
import { myOtherMethod } from '...your file'
The method you are using exports.functionName is CJS. you need to use require to get the methods.
The CommonJS (CJS) format is used in Node.js and uses require and
module.exports to define dependencies and modules. The npm ecosystem
is built upon this format.
If you want to use module method you can do this.
export { myOtherMethod1, myOtherMethod2 }
then you import like this.
import * as Module from '....file name'
Since you've not export default you should import the function with {} like :
import {helper} from "../Helper/globalHelper";
Hi I just want to receive ajax request, but the problem is that jquery is not defined in React. React version is 14.0
Error message
Uncaught ReferenceError: $ is not defined
I have two files :
index.js
import React from 'react';
import { render } from 'react-dom';
import App from './containers/App';
const root = document.getElementById('root');
render(
<App source='https://api.github.com/users/octocat/gists' />,
root
);
app.js
import React, { Component } from 'react';
export default class App extends Component {
componentDidMount() {
const { source } = this.props;
console.log($); // throws error
}
render() {
return (
<h1>Hey there.</h1>
);
}
}
Try add jQuery to your project, like
npm i jquery --save
or if you use bower
bower i jquery --save
then
import $ from 'jquery';
It happens mostly when JQuery is not installed in your project.
Install JQuery in your project by following commands according to your package manager.
Yarn
yarn add jquery
npm
npm i jquery --save
After this just import $ in your project file.
import $ from 'jquery'
I just want to receive ajax request, but the problem is that jQuery is not defined in React.
Then don't use it. Use Fetch and have a look at Fetch polyfill in React not completely working in IE 11 to see example of alternative ways to get it running
Something like this
const that = this;
fetch('http://jsonplaceholder.typicode.com/posts')
.then(function(response) { return response.json(); })
.then(function(myJson) {
that.setState({data: myJson}); // for example
});
Isn't easier than doing like :
1- Install jquery in your project:
yarn add jquery
2- Import jquery and start playing with DOM:
import $ from 'jquery';
Just a note: if you use arrow functions you don't need the const that = this part.
It might look like this:
fetch('http://jsonplaceholder.typicode.com/posts')
.then((response) => { return response.json(); })
.then((myJson) => {
this.setState({data: myJson}); // for example
});
Add "ref" to h1 tag :
<h1 ref="source">Hey there.</h1>
and
const { source } = this.props; change to const { source } = this.refs;
I want to use https://github.com/gdsestimating/dxf-parser in my project. When i import in like:
import { DxfParser } from 'dxf-parser';
and than call:
new DxfParser()
i get an error:
TypeError: dxf_parser__WEBPACK_IMPORTED_MODULE_3__ is not a
constructor
What would be the correct way to use the DxfParser in angular? I want to do the same in angular as the jaascript example on projects site:
var parser = new DxfParser();
try {
var dxf = parser.parseSync(fileText);
}catch(err) {
return console.error(err.stack);
}
thanks a lot!
Like the readme of the github states, did you install DxfParser?
npm install dxf-parser
You might also need to install the types for typescript like so:
npm install #types/dxf-parser
Since installing does not seem to be the problem I tried it myself. Doing the import like you did does not work. I looked into the code and it seems that DxfParser is a default export. So if you do:
import DxfParser from "dxf-parser";
It should be working.
More information on exports can be found here
NPM version : 10
React-Native Library : react-native-get-music-files
(Using android)
Installation :
npm i --save react-native-get-music-files
rnpm link
Things I Have Already Tried :
rnpm link react-native-get-music-files
react-native link
npm install
react-native run-android
REINSTALLING
MAKING A NEW PROJECT
Details :
Its documentation says add import com.reactlibrary.RNReatNativeGetMusicFilesPackage; but when automatically linking , it adds com.cinder72.musicfiles.RNReactNativeGetMusicFilesPackage;
Manually it is showing com.reactlibrary.RNReatN... is not found.
Automatically everything is working fine.
Error :
In the react-native-get-music-files/index.js
import { NativeModules, Platform } from 'react-native';
const { RNReactNativeGetMusicFiles } = NativeModules;
const MusicFiles = {
getAll(options){
return new Promise((resolve, reject) => {
if(Platform.OS === "android"){
RNReactNativeGetMusicFiles.getAll(options,(tracks) => {
resolve(tracks);
},(error) => {
resolve(error);
});
}else{
RNReactNativeGetMusicFiles.getAll(options, (tracks) => {
if(tracks.length > 0){
resolve(tracks);
}else{
resolve("Error, you don't have any tracks");
}
});
}
});
}
}
export default MusicFiles;
It says RNReactNativeGetMusic files is undefined.
I tried console log NATIVEMODULES and it shows nothing as RNReactNativeGetMusic or anything similar.
maybe the docs hasn't been updated for V2.
import com.cinder92.musicfiles.RNReactNativeGetMusicFilesPackage;
the above should work fine.
You're probably following the linking instructions on the package's npm page, which are outdated. Follow the instructions on this github repo instead.
Follow the steps for manual installation and don't forget to clean the code you previously added to link.
Then import it like this,
import MusicFiles from 'react-native-get-music-files';
Hope this helps you and feel free to ask any questions.
Hi I just want to receive ajax request, but the problem is that jquery is not defined in React. React version is 14.0
Error message
Uncaught ReferenceError: $ is not defined
I have two files :
index.js
import React from 'react';
import { render } from 'react-dom';
import App from './containers/App';
const root = document.getElementById('root');
render(
<App source='https://api.github.com/users/octocat/gists' />,
root
);
app.js
import React, { Component } from 'react';
export default class App extends Component {
componentDidMount() {
const { source } = this.props;
console.log($); // throws error
}
render() {
return (
<h1>Hey there.</h1>
);
}
}
Try add jQuery to your project, like
npm i jquery --save
or if you use bower
bower i jquery --save
then
import $ from 'jquery';
It happens mostly when JQuery is not installed in your project.
Install JQuery in your project by following commands according to your package manager.
Yarn
yarn add jquery
npm
npm i jquery --save
After this just import $ in your project file.
import $ from 'jquery'
I just want to receive ajax request, but the problem is that jQuery is not defined in React.
Then don't use it. Use Fetch and have a look at Fetch polyfill in React not completely working in IE 11 to see example of alternative ways to get it running
Something like this
const that = this;
fetch('http://jsonplaceholder.typicode.com/posts')
.then(function(response) { return response.json(); })
.then(function(myJson) {
that.setState({data: myJson}); // for example
});
Isn't easier than doing like :
1- Install jquery in your project:
yarn add jquery
2- Import jquery and start playing with DOM:
import $ from 'jquery';
Just a note: if you use arrow functions you don't need the const that = this part.
It might look like this:
fetch('http://jsonplaceholder.typicode.com/posts')
.then((response) => { return response.json(); })
.then((myJson) => {
this.setState({data: myJson}); // for example
});
Add "ref" to h1 tag :
<h1 ref="source">Hey there.</h1>
and
const { source } = this.props; change to const { source } = this.refs;