Compilation error saying cordova not available?
up vote
1
down vote
favorite
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
10.2k73475
asked Nov 10 at 12:47
RP McMurphy
289214
add a comment |
up vote
1
down vote
favorite
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
10.2k73475
asked Nov 10 at 12:47
RP McMurphy
289214
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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
10.2k73475
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
10.2k73475
asked Nov 10 at 12:47
RP McMurphy
289214
edited Nov 11 at 12:32
Zoe
10.2k73475
asked Nov 10 at 12:47
RP McMurphy
289214
edited Nov 11 at 12:32
Zoe
10.2k73475
edited Nov 11 at 12:32
Zoe
10.2k73475
edited Nov 11 at 12:32
Zoe
10.2k73475
10.2k73475
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
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
