Compilation error saying cordova not available?
I am building this app with Phonegap and React. When I include cordova.js inside the HTML template footer of my React project and use the Camera plugin inside of a React component and run build so that I can copy the build project to Phonegap's www folder, webpack comes up with an error that Camera is not available. Of course Camera plugin of Cordova will be available later at runtime when phonegap server will run once I copy the build folder to Phonegap's www folder and run the Phonegap server.
My question is how to include Cordova and it's camera plugin to React so that webpack finds it but doesn't add the dependency to compiled JavaScript file as the cordova library with all it's plugins will be also available later when Phonegap is run with the built files of React/webpack.
Here are my code and folder structures-
HTML-
<body>
<div id="root"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/plugins.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</body>
React component-
import React, { Component } from 'react';
import axios from 'axios';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as allActions from '../../actions/basket';
import restaurant_image from '../../assets/images/pictures/2t.jpg';
class Basket extends Component {
constructor(props) {
super(props);
this.deviceReady = this.deviceReady.bind(this);
this.state = {
restaurants_info: ,
showInput: false,
posts_awaiting: 0,
button_disabled: true
}
}
deviceReady () {
window.cordova.plugins.Camera.getPicture(this.onSuccess, this.onFail, { quality: 70, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true });
}
onSuccess(imageURI) {
var image = document.getElementById('urlImage');
image.src = imageURI;
image.style.display = 'block';
console.log(imageURI);
}
onFail(message) {
console.log(message);
}
componentDidMount() {
document.addEventListener('deviceready', this.deviceReady);
}
render() {
const imgStyle = {
maxWidth: "100%"
}
return (
<button onClick={this.deviceReady} className="button button-round button-xs uppercase ultrabold button-xs button-center button-orange">TakePic</button>
<img alt="bello" id="urlImage"/>
</div>
</div>
);
}
}
function mapStateToProps(state, prop) {
return {
posts_added: state.posts_added,
posts_basketed: state.posts_basketed,
awaiting_added: state.awaiting_added
}
}
function mapDispatchToProp(dispatch) {
return {
action: bindActionCreators(allActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProp)(Basket);
And here is the app structure-
I am running build command on React and copying over the build files to Phonegap's www folder-
android reactjs cordova camera phonegap edited Nov 11 at 12:32
Zoe
11k73675
asked Nov 10 at 12:47
RP McMurphy
289214
add a comment |
I am building this app with Phonegap and React. When I include cordova.js inside the HTML template footer of my React project and use the Camera plugin inside of a React component and run build so that I can copy the build project to Phonegap's www folder, webpack comes up with an error that Camera is not available. Of course Camera plugin of Cordova will be available later at runtime when phonegap server will run once I copy the build folder to Phonegap's www folder and run the Phonegap server.
My question is how to include Cordova and it's camera plugin to React so that webpack finds it but doesn't add the dependency to compiled JavaScript file as the cordova library with all it's plugins will be also available later when Phonegap is run with the built files of React/webpack.
Here are my code and folder structures-
HTML-
<body>
<div id="root"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/plugins.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</body>
React component-
import React, { Component } from 'react';
import axios from 'axios';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as allActions from '../../actions/basket';
import restaurant_image from '../../assets/images/pictures/2t.jpg';
class Basket extends Component {
constructor(props) {
super(props);
this.deviceReady = this.deviceReady.bind(this);
this.state = {
restaurants_info: ,
showInput: false,
posts_awaiting: 0,
button_disabled: true
}
}
deviceReady () {
window.cordova.plugins.Camera.getPicture(this.onSuccess, this.onFail, { quality: 70, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true });
}
onSuccess(imageURI) {
var image = document.getElementById('urlImage');
image.src = imageURI;
image.style.display = 'block';
console.log(imageURI);
}
onFail(message) {
console.log(message);
}
componentDidMount() {
document.addEventListener('deviceready', this.deviceReady);
}
render() {
const imgStyle = {
maxWidth: "100%"
}
return (
<button onClick={this.deviceReady} className="button button-round button-xs uppercase ultrabold button-xs button-center button-orange">TakePic</button>
<img alt="bello" id="urlImage"/>
</div>
</div>
);
}
}
function mapStateToProps(state, prop) {
return {
posts_added: state.posts_added,
posts_basketed: state.posts_basketed,
awaiting_added: state.awaiting_added
}
}
function mapDispatchToProp(dispatch) {
return {
action: bindActionCreators(allActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProp)(Basket);
And here is the app structure-
I am running build command on React and copying over the build files to Phonegap's www folder-
android reactjs cordova camera phonegap edited Nov 11 at 12:32
Zoe
11k73675
asked Nov 10 at 12:47
RP McMurphy
289214
add a comment |
I am building this app with Phonegap and React. When I include cordova.js inside the HTML template footer of my React project and use the Camera plugin inside of a React component and run build so that I can copy the build project to Phonegap's www folder, webpack comes up with an error that Camera is not available. Of course Camera plugin of Cordova will be available later at runtime when phonegap server will run once I copy the build folder to Phonegap's www folder and run the Phonegap server.
My question is how to include Cordova and it's camera plugin to React so that webpack finds it but doesn't add the dependency to compiled JavaScript file as the cordova library with all it's plugins will be also available later when Phonegap is run with the built files of React/webpack.
Here are my code and folder structures-
HTML-
<body>
<div id="root"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/plugins.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</body>
React component-
import React, { Component } from 'react';
import axios from 'axios';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as allActions from '../../actions/basket';
import restaurant_image from '../../assets/images/pictures/2t.jpg';
class Basket extends Component {
constructor(props) {
super(props);
this.deviceReady = this.deviceReady.bind(this);
this.state = {
restaurants_info: ,
showInput: false,
posts_awaiting: 0,
button_disabled: true
}
}
deviceReady () {
window.cordova.plugins.Camera.getPicture(this.onSuccess, this.onFail, { quality: 70, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true });
}
onSuccess(imageURI) {
var image = document.getElementById('urlImage');
image.src = imageURI;
image.style.display = 'block';
console.log(imageURI);
}
onFail(message) {
console.log(message);
}
componentDidMount() {
document.addEventListener('deviceready', this.deviceReady);
}
render() {
const imgStyle = {
maxWidth: "100%"
}
return (
<button onClick={this.deviceReady} className="button button-round button-xs uppercase ultrabold button-xs button-center button-orange">TakePic</button>
<img alt="bello" id="urlImage"/>
</div>
</div>
);
}
}
function mapStateToProps(state, prop) {
return {
posts_added: state.posts_added,
posts_basketed: state.posts_basketed,
awaiting_added: state.awaiting_added
}
}
function mapDispatchToProp(dispatch) {
return {
action: bindActionCreators(allActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProp)(Basket);
And here is the app structure-
I am running build command on React and copying over the build files to Phonegap's www folder-
android reactjs cordova camera phonegap edited Nov 11 at 12:32
Zoe
11k73675
asked Nov 10 at 12:47
RP McMurphy
289214
I am building this app with Phonegap and React. When I include cordova.js inside the HTML template footer of my React project and use the Camera plugin inside of a React component and run build so that I can copy the build project to Phonegap's www folder, webpack comes up with an error that Camera is not available. Of course Camera plugin of Cordova will be available later at runtime when phonegap server will run once I copy the build folder to Phonegap's www folder and run the Phonegap server.
My question is how to include Cordova and it's camera plugin to React so that webpack finds it but doesn't add the dependency to compiled JavaScript file as the cordova library with all it's plugins will be also available later when Phonegap is run with the built files of React/webpack.
Here are my code and folder structures-
HTML-
<body>
<div id="root"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/plugins.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</body>
React component-
import React, { Component } from 'react';
import axios from 'axios';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as allActions from '../../actions/basket';
import restaurant_image from '../../assets/images/pictures/2t.jpg';
class Basket extends Component {
constructor(props) {
super(props);
this.deviceReady = this.deviceReady.bind(this);
this.state = {
restaurants_info: ,
showInput: false,
posts_awaiting: 0,
button_disabled: true
}
}
deviceReady () {
window.cordova.plugins.Camera.getPicture(this.onSuccess, this.onFail, { quality: 70, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true });
}
onSuccess(imageURI) {
var image = document.getElementById('urlImage');
image.src = imageURI;
image.style.display = 'block';
console.log(imageURI);
}
onFail(message) {
console.log(message);
}
componentDidMount() {
document.addEventListener('deviceready', this.deviceReady);
}
render() {
const imgStyle = {
maxWidth: "100%"
}
return (
<button onClick={this.deviceReady} className="button button-round button-xs uppercase ultrabold button-xs button-center button-orange">TakePic</button>
<img alt="bello" id="urlImage"/>
</div>
</div>
);
}
}
function mapStateToProps(state, prop) {
return {
posts_added: state.posts_added,
posts_basketed: state.posts_basketed,
awaiting_added: state.awaiting_added
}
}
function mapDispatchToProp(dispatch) {
return {
action: bindActionCreators(allActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProp)(Basket);
And here is the app structure-
I am running build command on React and copying over the build files to Phonegap's www folder-
android reactjs cordova camera phonegap android reactjs cordova camera phonegap edited Nov 11 at 12:32
Zoe
11k73675
asked Nov 10 at 12:47
RP McMurphy
289214
edited Nov 11 at 12:32
Zoe
11k73675
asked Nov 10 at 12:47
RP McMurphy
289214
edited Nov 11 at 12:32
Zoe
11k73675
edited Nov 11 at 12:32
Zoe
11k73675
edited Nov 11 at 12:32
Zoe
11k73675
11k73675
asked Nov 10 at 12:47
RP McMurphy
289214
asked Nov 10 at 12:47
RP McMurphy
289214
asked Nov 10 at 12:47
RP McMurphy
289214
289214
add a comment |
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239101%2fcompilation-error-saying-cordova-not-available%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239101%2fcompilation-error-saying-cordova-not-available%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
