I'm working in an Ionic 1 project. What i'm trying to make is a function that sends a notification using the package ionic-push-server. But for some reason the program trows me an error saying that the require function is not defined.
ReferenceError: require is not defined
This is my code (taken from https://www.npmjs.com/package/ionic-push-server)
$scope.notification = function(){
var ionicPushServer = require('ionic-push-server');
var credentials = {
IonicApplicationID : "APP_ID",
IonicApplicationAPItoken : "APP_API_TOKEN"
};
var notification = {
"tokens": TOKEN,
"profile": "push",
"notification": {
"title": "Hola",
"message": "Hola mundo!"
}
};
ionicPushServer(credentials, notification);
};
I've already installed the package using npm, so i know this is not the problem.
I've tried to do something like this:
<script src="node_modules/ionic-push-server/server.js"></script>
And use the function inside (export), but it trowed me an error like this:
GET http://localhost:8100/node_modules/ionic-push-server/server.js
Also i've tried doing this:
import * as ionicPushServer from "ionic-push-server";
But i've got this error:
Uncaught SyntaxError: Unexpected token import
I could solve it using local notifications.
https://github.com/katzer/cordova-plugin-local-notifications
Related
I am trying to replace bower in my repo and I am having trouble replacing this package: "jsTimezoneDetect": "1.0.4". The suggested package to replace this is "jstimezonedetect": "^1.0.6". I am using this package as shown here:
var missionJoin = {
timeZoneId : jstz.determine().name()
};
This however, gives me this error:
ReferenceError: Can't find variable: Intl in node_modules/jstimezonedetect/dist/jstz.js (line 124)
get_from_internationalization_api#node_modules/jstimezonedetect/dist/jstz.js:124:22
determine#node_modules/jstimezonedetect/dist/jstz.js:412:67
joinMission#app/scripts/controllers/robo.profile.ProfileServiceCtrl.js:1:27975
test/specs/robo.profile.profileServiceCtrl.spec.js:151:27
<Jasmine>
This package does not have any dependencies and the error seems to come from a problem in the package itself. Is there something I am doing wrong here? Has anyone else faced a similar issue? Any help would be greatly appreciated!
For anyone who might face this problem in the future, here is how I got around this issue:
Found in the last paragraph of https://github.com/iansinnott/jstz
export function findTimeZone() {
const oldIntl = window.Intl
try {
window.Intl = undefined
const tz = jstz.determine().name()
window.Intl = oldIntl
return tz
} catch (e) {
// sometimes (on android) you can't override intl
return jstz.determine().name()
}
}
and
var missionJoin = {
timeZoneId : findTimeZone()
};
I have a react module where i am using TypeScript.
I want to use html within a Swal-component, and that just doesn't work.
Here is my code:
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
const MySwal = withReactContent(Swal);
MySwal.fire(<p>Holahola</p>);
When i hover the "Holahola" i get the error message: "Type 'Element' has no properties in common with type 'SweetAlertOptions'.ts(2769)".
When i try to run my code in Chrome, i get: "Uncaught TypeError: sweetalert2_react_content_1.default is not a function"
Someone got a clue what happens here?
I have also tried:
MySwal.fire({
title: <p>Holahola</p>
})
Then i get this error:
That's the known issue, you can subscribe to it here: https://github.com/sweetalert2/sweetalert2-react-content/issues/102
As a workaround, use SweetAlertOptions for passing the params:
MySwal.fire({
title: <p>Holahola</p>
});
I'm trying to use Winston in React.js.
When creating the logger I get the error
TypeError: fs.existsSync is not a function
This is how I create it:
this.logger = winston.createLogger({
level: 'info',
format: winston.format.json(),
transports: [
//
// - Write to all logs with level `info` and below to `combined.log`
// - Write all logs error (and below) to `error.log`.
//
new winston.transports.Console(),
new winston.transports.File({ filename: 'error.log', level: 'error' }),
new winston.transports.File({ filename: 'combined.log' })
]
});
I only saw questions about how to handle it in Node. How do I solve this issue with React?
fs is a nodejs library so you can't use it on browser side. Use winston-transport-browserconsole instead.
https://www.npmjs.com/package/winston-transport-browserconsole
It is easy to use and supports logging json objects:
example-
import * as winston from "winston";
import BrowserConsole from 'winston-transport-browserconsole';
const level = "debug";
winston.configure({
transports: [
new BrowserConsole(
{
format: winston.format.simple(),
level,
},
),
],
});
winston.debug("DEBUG ", {a: 1, b: "two"});
I had the same error that you have. Your vscode might have added a new module to your js file. Remove that module and your app should work just fine.
import { TRUE } from "node-sass"; or import { FALSE } from "node-sass";
just remove the above codes
I'm implementing PayPal's In-Context Checkout and am using Advanced In-Context JavaScript settings (https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings)
My app is a React app. So I can't use PP API as they suggest it, that is just throw a code between <script> ... </script> tags somewhere in the page under their buttons. My React components have state and data that I need to send to server within PP function calls. So I placed PP code in componentDidMount method. And for some reason PP throws this error:
checkout.js:4734 Uncaught SecurityError: Blocked a frame with origin "http://example.com:3000" from accessing a frame with origin "https://www.sandbox.paypal.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
(anonymous function) # checkout.js:4734
checkout.js:4515 GET http://www.paypalobjects.com/api/oneTouch.html net::ERR_EMPTY_RESPONSE
Here is the code:
componentDidMount() {
window.paypalCheckoutReady = function() {
paypal.checkout.setup(config[NODE_ENV].ppMerchantID, {
locale: 'en_US',
environment: 'sandbox',
buttons: [
{
container: 'checkoutBtnContainer',
type: 'checkout',
color: 'gold',
size: 'medium',
shape: 'pill',
click: (ev)=>{
paypal.checkout.initXO();
$.post('/checkout', {
checkoutData: this.props.checkoutData,
})
.done(res => {
paypal.checkout.startFlow(res.link);
})
.fail(err => {
paypal.checkout.closeFlow();
});
}
}
],
});
};
},
I know about cross-origin policy. I don't understand why it is the case here. Why the code works fine if I throw it on the page between <script> ... </script> tags, but PP throws an error if I use it in my React component. What is the cause of that? Is it React fault or PayPal's?
UPD: No, below is not a solution for the problem. Occasionally Paypal's checkout.js script throws the error.
However, it solves this issue
Apparently,
1) there was no this:
window.paypalCheckoutReady = function() {
// wrong this is here
}
I changed to:
window.paypalCheckoutReady = () => {
// correct this is here now
}
I don't like .bind(this).
2) I removed <form /> tag and set plain <div> instead:
// before
<form id="checkoutBtnContainer" method="post" action="/checkout"></form>
// after
<div id="checkoutBtnContainer"></div>
I don't know why and how, but all works fine now.
I get this JavaScript error when running any version of wkhtmltopdf with patched Qt:
Warning: undefined:0 Error: [$injector:modulerr] Failed to instantiate module ng due to:
'undefined' is not an object
http://errors.angularjs.org/1.5.7/$injector/modulerrp0=ng&p1='undefined'%20is%20not%20an%20object
(I'm trying to render a page with angularjs 1.5).
When I use a version of wkhtmltopdf without patched Qt I don't get the error and everything works fine.
I use this heroku buildpack which installs version 0.12.3 with patched Qt, and I got this error.
Any idea how to solve my problem? I may install wkhtmltopdf without patched Qt on production but it seems I will have to compile it...
I finally managed to make it work with all versions: I needed a special version of the .bind() JavaScript function polyfill:
var isFunction = function (o) {
return typeof o == 'function';
};
var bind,
slice = [].slice,
proto = Function.prototype,
featureMap;
featureMap = {
'function-bind': 'bind'
};
function has(feature) {
var prop = featureMap[feature];
return isFunction(proto[prop]);
}
// check for missing features
if (!has('function-bind')) {
// adapted from Mozilla Developer Network example at
// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
bind = function bind(obj) {
var args = slice.call(arguments, 1),
self = this,
nop = function() {
},
bound = function() {
return self.apply(this instanceof nop ? this : (obj || {}), args.concat(slice.call(arguments)));
};
nop.prototype = this.prototype || {}; // Firefox cries sometimes if prototype is undefined
bound.prototype = new nop();
return bound;
};
proto.bind = bind;
}