I am trying to use cordova-plugin-sqlite-2 plugin in my Ionic app, but I'm not sure how to use its features for opening or creating a database .
What import () statement should I give to use this plugin ?
I have referred this Question in which 'import { SQLite } from 'ionic-native';
is used , but it is showing error when used.
I'm not sure if you're trying to use sqlite only or some other DB, but I have recently used PouchDB inside my Ionic5+ReactJs+Typescript app, and here is what I did:
Install the necessary packages
npm install pouchdb pouchdb-adapter-cordova-sqlite cordova-plugin-sqlite-2
#types/pouchdb #ionic-native/sqlite
Please note that #types packages are for typescript support.
Create a sample database
import PouchDB from "pouchdb";
import "cordova-plugin-sqlite-2/dist/sqlite-plugin";
import cordovaSqlitePlugin from "pouchdb-adapter-cordova-sqlite";
PouchDB.plugin(cordovaSqlitePlugin);
let sampleDB = new PouchDB("sampleDatabase", {
adapter: "cordova-sqlite",
});
After that you can use the database object directly
sampleDB.post({name: "my first object"});
Related
I'm having issues getting PostgreSQL to run on my local machine with react-native. I work primarily as a database developer so it's possible I'm missing something, but in my opinion this is something that should be well documented.
I run the following commands to create a react native project (npm v 4.6.1)
npm install -g expo cli
expo init needhelp
cd needhelp
then I paste in my app.js file and it runs fine. This is my app.js file.
import React, { Component } from 'react';
import { Text, View, Image } from 'react-native';
//const { Client } = require('pg')
//const { Pool, Client } = require('pg')
export default class HelloWorldApp extends Component {
render() {
return (
<View style = {{flex: 1, flexDirection: 'column', alignItems: 'center',}}>
<Text>Hello World!</Text>
</View>
);
}
}
The problem is, when I try and include pg in any way I get errors. The first error I get is "unable to resolve module pg." Then after I run npm install pg, I get
[22:32:20] The package at "node_modules\pg\lib\index.js" attempted to import the Node standard library module "util". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo
[22:32:20] Failed building JavaScript bundle.
Then after installing this I get:
[22:34:03] The package at "node_modules\pg\lib\connection.js" attempted to import the Node standard library module "net". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo
[22:34:03] Failed building JavaScript bundle.
Building JavaScript bundle [===================================================================================== ] 9>
Then
[2:36:57] The package at "node_modules\pg\lib\client.js" attempted to import the Node standard library module "events". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo
[22:36:57] Failed building JavaScript bundle.
then
[00:38:48] The package at "node_modules\pg\lib\connection.js" attempted to import the Node standard library module "tls". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo
[22:38:48] Failed building JavaScript bundle.
Then finally, the error that dooms me:
metro bundler has encountered an internal error, please check your terminal error output for more details.
I'm trying to add OfficeUI fabric components in a blog build using gatsby js.
As soon as I'm importing any component, the site stop to works.
Using develop command, I can see in the browser console : SyntaxError: export declarations may only appear at top level of a module
How to fix this ? (I'm very new to node dev).
Searches I've done suggest problems with babel not using the es2015 preset. However, I double checked, the .babelrc file is mentioning this preset.
Here's the complete operations I've done (on Windows 10 x64 if it matters):
cloned the gatsby-starter-blog-no-styles repo :
gatsby.cmd new someblog https://github.com/noahg/gatsby-starter-blog-no-styles
cd someblog
npm install
drink a coffee (will move to yarn soon)
Check that works
gatsby develop
Opened the browser (http://localhost:8000). Its Ok
added office ui fabric react components
npm install --save office-ui-fabric-react
Restart gatsby develop. Still working
change src/layouts/index.js file to import an office component
import React from 'react'
import Link from 'gatsby-link'
import { Button } from 'office-ui-fabric-react/lib/Button'
class Template extends React.Component {
....
And voilĂ ! it stop to works. In the browser console, I see an error : SyntaxError: export declarations may only appear at top level of a module
I put in GH a complete reproduction repository : https://github.com/stevebeauge/repro-gatsbyjs-officeui-error
[Edit] Digging a bit I can see in the generated 'common.js' file the error :
/***/ "./node_modules/office-ui-fabric-react/lib/Button.js":
/***/ (function(module, exports) {
export * from './components/Button/index';
//# sourceMappingURL=Button.js.map
/***/ }),
The export here seems to be forbidden, which leads to Babel issue (not found how to solve though)
Recently i stumbled upon the similar error, my solution was to explicitly import from lib-commonjs:
import { Button } from 'office-ui-fabric-react/lib-commonjs/Button';
instead of
import { Button } from 'office-ui-fabric-react/lib/Button'
Seems to be the error occurs since babel isn't converting office-ui-fabric-react to CommonJS module.
I want to use the Leaflet.awesome-marker plugin in my angular project.
I installed the package throught yarn and imported in my component using
import * as awesome from 'leaflet.awesome-marker';
But I receive the following error:
Cannot find module 'leaflet.awesome-marker'
Doing the same thing with the geojson module works fine, why not with this one?
Try importing leaflet.awesome-markers, not leaflet.awesome-marker
I'm building simple webs with meteor, just to get to know each other, and I'm playing with iron:router as router.
The "problem" I got is that in my meteorapp/lib/routes.js I need to import my collection file which is in meteorapp/imports/ui/reservations.js:
import { Reservations } from '../imports/api/reservations.js';
Otherwise I'm not able to reach it in the template, even though I imported it same line (different path) in the templage.js file like this:
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
//collection Reservations
import { Reservations } from '../api/reservations.js';
import './roomSchedule.html';
Template.roomSchedule.onCreated(function roomScheduleOnCreated() {
Meteor.subscribe('reservations');
});
Template.roomSchedule.helpers({
allHours() {
return Reservations.find();
},
});
I don't know if this would help, meteor list output:
user#laptop:~/Documents/meteorApps/mymeteorApp$ meteor list
blaze-html-templates 1.1.2 Compile HTML templates into reactive UI with Meteor Blaze
ecmascript 0.10.3* Compiler plugin that supports ES2015+ in all .js files
es5-shim 4.7.3 Shims and polyfills to improve ECMAScript 5 support
insecure 1.0.7 (For prototyping only) Allow all database writes from the client
iron:router 1.1.2 Routing specifically designed for Meteor
meteor-base 1.3.0 Packages that every Meteor app needs
mobile-experience 1.0.5 Packages for a great mobile user experience
mongo 1.4.3 Adaptor for using MongoDB and Minimongo over DDP
reactive-var 1.0.11 Reactive variable
shell-server 0.3.1 Server-side component of the `meteor shell` command.
standard-minifier-css 1.4.1 Standard css minifier used with Meteor apps by default.
standard-minifier-js 2.3.2 Standard javascript minifiers used with Meteor apps by default.
tracker 1.1.3 Dependency tracker to allow reactive callbacks
So it works... but don't know why... Thanks in advance to everyone.
Axel.
I am trying to import famous into my application
When i create a breakpoint in the base index.html file in ember cli and look at what require seems to know about i see famo.us is there
in my brocfile i have tried the following
app.import('vendor/famous/famous.js', {
'famous/core/Context':''
});
app.import('vendor/famous/famous.js', {
'famous/core/Context':'default'
});
app.import('vendor/famous/famous.js');
this may be fixed by master of loader.js https://github.com/stefanpenner/loader.js/issues/25