I would like to know how to use React components from npm in Meteor 1.3 using import.
I am trying to use react-gravatar in my project. I did npm install --save react-gravatar. And in my component, I required it:
import React from 'react';
import Gravatar from 'react-gravatar';
export default React.createClass({
render() {
...
}
});
But I get:
Uncaught Error: Cannot find module 'querystring'
I think this is because querystring is not available in client side, and I need to use browserify-reactify of some sort. But how can I do so in Meteor 1.3?
Related
I'm new Vue, I don't understand this error from installing bootstrap-vue-3
Install commands:
npm i --save bootstrap bootstrap-vue-3
Configuration [main.js]:
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import BootstrapVue3 from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
createApp(App)
.use(BootstrapVue3)
.mount('#app')
Errors:
Rollup failed to resolve import "bootstrap/js/dist/carousel" from "node_modules/bootstrap-vue-3/dist/bootstrap-vue-3.es.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to rollupInputOptions.external
This is a new project -- nothing added aside from default stuff and bootstrap.
I want to import the firebase-database using esm import. I can only find the script version:
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-database.js"></script>
What is the url I need for the esm module version?
Note: I do not want a "bare import", I am not using webpack etc. I need a complete url.
There is an older version available on unpkg.com but not the current version.
It turns out there are two CDN's that can provide this: snowpack/skypack, and jspm:
skypack:
import firebase from 'https://cdn.skypack.dev/#firebase/app'
import 'https://cdn.skypack.dev/#firebase/database'
jspm:
import { firebase } from 'https://jspm.dev/#firebase/app'
import 'https://jspm.dev/#firebase/database'
These both deal with "bare import" conversion to JS, and any code conversions required to be JS Modules.
Google does not appear to want to support a module form on their firebase CDN, an Issue to that effect was immediately closed, suggesting complex workflow solutions.
I'm really thankful to the two projects above, supporting simple es6 JS and zero workflow solutions.
Edit: snowpack's esinstall can turn most js files into modules. Here's a node script that brought in all my dependencies:
#!/usr/bin/env node --require esm
import { install } from 'esinstall'
import nodePolyfills from 'rollup-plugin-node-polyfills'
async function run() {
const foo = await install(
[
'mapbox-gl',
'three',
'three/examples/jsm/controls/OrbitControls.js',
'three/src/core/Object3D.js',
'chart.js',
'dat.gui',
'fflate',
'#turf/turf',
'stats.js',
'#firebase/app',
'#firebase/database',
],
{
rollup: {
plugins: [nodePolyfills()],
},
}
)
}
run()
If you're using a bundler, then follow the instructions in the documentation:
Install the firebase npm package and save it to your package.json file
by running:
npm install --save firebase
To include only specific Firebase products (like Authentication and
Cloud Firestore), import Firebase modules:
// Firebase App (the core Firebase SDK) is always required and must be listed first
import * as firebase from "firebase/app";
// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";
// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";
For realtime database, you would add import "firebase/database".
I'm trying to add SQlite to my ionic4 project, but get installation errors.
My NPM install was this:
ionic cordova plugin add cordova-sqlite-storage
npm install #ionic-native/sqlite
//ionic plugin add cordova-sqlite-storage ==> this one makes error
In main.js, I tried each of the following:
import SQLite from 'ionic-native';
import {SQLite} from 'ionic-native';
import SQLite from '#ionic-native/sqlite';
import {SQLite} from '#ionic-native/sqlite';
import { SQLite, SQLiteObject } from '#ionic-native/sqlite';
Here are the errors: a) npm warning, b) console error, and c) Chrome inspector for main.js
And here's the code from main.js (last line is where everything fails).
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
render : (h) => h(App),
mounted() {
this.storage = new SQLite();
*** I marked this question as answered, but there appears to be no answer yet. I'll keep working on it.
#ionic/vue is still in beta and the team is working on integrating it with the Vue CLI. They are also using Capacitor, not Cordova, as the official native bridge for this project. As such it is recommended to use Capacitor if at all possible. Should you go that route, their storage API is available in lieu of SQLite.
If you would like to persist with your Cordova project, the Ionic Storage abstraction won't be available so you would have to bypass Ionic altogether.
Install the plugin using the Cordova CLI (#ionic-native/sqlite is not required):
cordova plugin add cordova-sqlite-storage
Use the plugin directly e.g.
const db = window.sqlitePlugin.openDatabase({...})
db.executeSql('INSERT...', [...values], callbackFn, errorFn)
I'm trying to use the firebase in a react native project
I installed the firebase in my project:
npm install --save firebase
and I'm importing it into my app.js
import firebase from 'firebase';
import React, { Component } from 'react';
import {
Platform,
Text,
View
} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View >
<Text>Testando Firebase</Text>
</View>
);
}
}
and then the error is displayed:
Objects are not valida as a react child (found: object with
keys{&&typeof, type, key, ref, props, _owner, _store}). If you meant
to render a collection of children, use an array instead.
but when I remove the import from firebase, the app works perfectly.
Try to install the version 5.0.2. Use this command as administrator:
npm uninstall firebase
npm install --save firebase#5.0.2
As far as i see, the current version (5.0.4) is buggy!
You need to import as follow
import * as firebase from 'firebase';
You first must have firebase installed.
The solution is to uninstall the current version of Firebase and install an older version.
1st step npm uninstall firebase
2nd step npm i firebase#8.0.3
It was the version that worked for my case.
For a new project, I have run those in terminal
npm init
meteor add angular2-compilers
meteor remove blaze-html-templates
meteor npm install --save angular2-meteor
meteor npm install --save meteor-node-stubs
meteor npm install --save bootstrap4-webpack-package
meteor npm install --save ng2-bootstrap
import 'reflect-metadata';
import 'zone.js/dist/zone';
import 'bootstrap4-webpack-package';
import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { Alert } from 'ng2-bootstrap/ng2-bootstrap';
#Component({
selector: 'app',
template: `<alert type="info">ng2-bootstrap hello world!</alert>`,
directives: [Alert]
})
class App { }
bootstrap(App);
Right now bootstrap4-webpack-package makes Bootstrap 4 works, but ng2-bootstrap still not works.
Since I am using Bootstrap 4, so I also tried to add
import { Ng2BootstrapConfig, Ng2BootstrapTheme } from 'ng2-bootstrap/ng2-bootstrap';
Ng2BootstrapConfig.theme = Ng2BootstrapTheme.BS4;
But still not works.
It shows the error:
EXCEPTION: No Directive annotation found on Alert
EXCEPTION: Error: Uncaught (in promise): No Directive annotation found on Alert
I am not sure whether this is related with this issue.
How can I use ng2-bootstrap? Thanks
At last I found it is because of my NPM problem. Because the code can run well on other people's machine.
I uninstall my NPM, and install the new v5.10.1, the problem fixes!
Check here for details.
Hope this can help people who met similar weird problem.