In a Meteor/React app I need to import Stripe from mrgalaxy:stripe. I tried:
import { Stripe } from 'meteor/mrgalaxy:stripe';
but it returns:
TypeError: Cannot read property 'setPublishableKey' of undefined
In the server folder I created stripe.js file where added the following:
import { Meteor } from 'meteor/meteor';
import { Stripe } from 'meteor/mrgalaxy:stripe';
Meteor.startup(function(){
Stripe.setPublishableKey(Meteor.settings.public.StripePub);
});
Based on this test that's in the github repository where there is no import statement
Tinytest.add('Stripe client is available', function(test){
test.isTrue(Stripe != null);
});
I'm guessing that including the package just adds a Stripe variable to the global scope.
The stripe_client.html page, that appears to be the only client code in the package, just contains the following html snippet.
<head>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript" src="https://checkout.stripe.com/checkout.js"></script>
</head>
Thus, I think your import is just overriding the global variable. Have you tried removing your import statement? (Please forgive my almost total ignorance of meteor - I may be way off base here).
What helped me was adding this package "stripe": "^4.9.0" into package.json in addition to mrgalaxy:stripe in .meteor/packages
Related
I was trying to use redux in an angular 1.x app. I added the scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js"></script>
<script src="https://unpkg.com/ng-redux/umd/ng-redux.min.js"></script>
to my html head. Then I created a file just to test if things are working correctly:
angular.module("app", ["ngRedux"]).config(function ($ngReduxProvider) {
$ngReduxProvider.createStoreWith(
{
counterStateReducer: function (state, action) {},
},
[]
);
});
But when I run I get an error:
TypeError: Cannot read properties of undefined (reading 'combineReducers')
at Object.$get (ngRedux.js:92:18)
at Object.invoke (angular.js:5208:19)
...(other lines ommited by me)
I know that the error is from the file ngRedux.js specifically at this line _reducer = combineReducers(reducersObj); but I am new to JS and the docs don't say how to import this library other than by adding the scripts, so how can I fix it?
Turns out the dependencies scripts were wrong, these ones worked for me:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js"></script>
<!-- Redux -->
<script src="https://unpkg.com/redux#latest/dist/redux.js"></script>
<!-- NgRedux -->
<script src="https://unpkg.com/ng-redux/umd/ng-redux.js"></script>
I got them from the examples page on the official github repos of ngRedux and redux.
Note: you may also need to declare type=module on these scripts if you get that import is not defined.
I am new Dynamics CRM. My project includes form submissions and validations. I am planning to build a product using a React with Redux frontend and a service from CRM.
What will be the best practice in CRM on Building CRM Web Resources
Can anyone guide me?
https://github.com/sonomapartners/web-resources-with-react
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import CaseSummary from './components/CaseSummary.jsx';
window.addEventListener('load', function onLoad() {
ReactDOM.render( <CaseSummary />,
document.getElementById("container") );
});
Get context:
Add ClientGlobalContext.js.aspx in the in the index.html:
<script type="text/javascript" src="ClientGlobalContext.js.aspx">. ClientGlobalContext is the offical hook to Dynamics form context.
In the React componentDidMount life cycle, Add const context = GetGlobalContext(); to get the context object.
if you send data to the WebResource with the OpenWebResource(webResourceName, windowOptions, data), you can get the data in this way: JSON.parse(context.getQueryStringParameters().Data);
Intellisense: if you are using TypeScript use the d.ts (definition) file: ///<reference path=Xrm.V9.d.ts/>. you can get it here.
Uplaod: WebRersource can't be jsx or tsx type. After you compile your project you should only upload the bundled file (bundle.js).
Debug: If you want to debug your jsx/tsx file, you will need to use fiddler's AutoResponder to use the source map file. Here is an explanation.
I am newbie to React.js. For learning purpose just I created the login page which you can find here.
In my local project also, I used the CDN for babel and react, like below.
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
I want to use one of the form validation plugin into this example. But when I tried to include this (as per the document)
import ValidateableForm from 'react-form-validate';
I am getting the following error.
Uncaught ReferenceError: require is not defined
I went through few posts and they said that I have to use webpack or Rollup or Browsify .I am not sure how to include this in to my current local project setup. Since I am not using npm (in learing I dont want to use npm)
I dont know how to include that plugin into my project
If it is already coming with external site , I cant able to figure
it out what is the issue.
Please help me to resolve the issue.
This is an old question, but at least currently, this is completely possible with conventional script tags. This article is very helpful for understanding development setup alternatives for React
In that article it details bringing in React, React-Dom, and Babel via script tags for development, like this (I'm linking to npm downloaded packages, but that isn't necessary):
<script src="/node_modules/react/umd/react.development.js"></script>
<script src="/node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="/node_modules/#babel/standalone/babel.min.js"></script>
In my case, I needed to bring in the react-notification-system plugin:
<script src="/node_modules/react-notification-system/dist/react-notification-system.min.js"></script>
(Note the use of the compiled 'dist' version)
Once that was included I was able use it like this:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.notificationSystem = new ReactNotificationSystem();
}
addNotification = event => {
event.preventDefault();
const notification = this.notificationSystem.current;
notification.addNotification({
message: 'Notification message',
level: 'success'
});
};
render() {
return (
<div>
<button onClick={this.addNotification}>Add notification</button>
<ReactNotificationSystem ref={this.notificationSystem} />
</div>
);
}
}
I had to look in the plugin's code to know that the name: ReactNotificationSystem would be available, much of the plugin documentation that you find is not written with this type of dev setup in mind, but it does work.
I would like to use react-virtualized in a web application via cdnjs and SystemJS.
From all the examples that I have seen, it seems that react-virtualized and react libs are loaded locally, then bundled with Webpack before being included in a web page. Now I would like to use it via cdnjs without Webpack by simply importing it with SystemJS. But when I tried that I am getting errors saying that it can't find React.
I was wondering if anyone has tried this before, and whether this is supported at all by react-virtualized. Thanks.
UPDATE:
For clarity, I have included some code to show what I am trying to do.
index.html:
...
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.0-alpha.1/system.js"></script>
<script>
System.config({
map: {
"react":"https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js",
"react-dom":"https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js",
"react-virtualized":"https://unpkg.com/react-virtualized/dist/umd/react-virtualized.js"
}
</script>
</head>
...
main.jsx:
import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column} from 'react-virtualized';
...
What you are doing is possible using the UMD build of react-virtualized. You can see an example of that being done here. In order for it to work though, you'll need to also import UMD builds of react-with-addons and react-dom since react-virtualized depends on them.
For example:
<script src="https://unpkg.com/react/dist/react-with-addons.min.js"></script>
<script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/react-virtualized/dist/umd/react-virtualized.js"></script>
The react-virtualized UMD build expects React and ReactDOM to be loaded in the global space.
Alternately there should be a way with SystemJS to expose react-dom and react-with-addons as globals for libraries like react-virtualized to consume. I'm not a SystemJS user, but I think it might be something like this:
System.config({
meta: {
'path/to/react-virtualized.js': {
globals: {
React: 'path/to/react-addons-shallow-compare.js',
ReactDOM: 'path/to/react-dom.js'
}
}
}
});
It's been a while, but I had some time to look at this again. Thanks to #brianvaughn's suggestion, I have managed to resolve this with the following:
System.config({
meta: {
"react-virtualized": {
exports: "ReactVirtualized",
format: "global",
globals: {
React: "react",
ReactDOM: "react-dom"
}
}
},
map: {
"react": "https://unpkg.com/react#16/umd/react.production.min.js",
"react-dom":"https://unpkg.com/react-dom#16/umd/react-dom.production.min.js",
"react-virtualized":"https://cdnjs.cloudflare.com/ajax/libs/react-virtualized/9.10.1/react-virtualized.min.js",
}
})
main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import * as ReactVirtualized from 'react-virtualized';
let Table = ReactVirtualized.Table;
let Column = ReactVirtualized.Column;
let AutoSizer = ReactVirtualized.AutoSizer;
...
I have an issue with the Angular 2 Router. I want basically to be able to navigate through my app with a function so I wanna use the navigate function from the Router, like in the official example.
So here is what I have in my files :
index.html
<script src='#routes.Assets.versioned("lib/typescript/lib/typescript.js")'></script>
<script src='#routes.Assets.versioned("lib/es6-shim/es6-shim.min.js")'></script>
<script src='#routes.Assets.versioned("lib/angular2/bundles/angular2-polyfills.js")'></script>
<script src='#routes.Assets.versioned("lib/angular2/es6/dev/src/testing/shims_for_IE.js")'></script>
<script src='#routes.Assets.versioned("lib/systemjs/dist/system.js")'></script>
<script src='#routes.Assets.versioned("lib/rxjs/bundles/Rx.js")'></script>
<script src='#routes.Assets.versioned("lib/angular2/bundles/angular2.dev.js")'></script>
<script src='#routes.Assets.versioned("lib/angular2/bundles/http.js")'></script>
<script src='#routes.Assets.versioned("systemjs.config.js")'></script>
<script src='#routes.Assets.versioned("lib/angular2/bundles/router.dev.js")'></script>
and in the typescript file where I want to use navigate :
import { Http } from "angular2/http"
import { Router } from "angular2/router"
export class ClassName {
constructor (private _http: Http, private _router: Router) {}
goSomewhere(pageName: string) {
let link = [pageName]
this._router.navigate(link)
}
}
It's basically this, I tried to undo and add step by step, and the import worked and then it failed when adding it to the constructor, removing private or renaming the variable didn't work either.
On my imports I used to have angular2.js and router.js and got this issue :
angular2-polyfills.min.js:1 Error: EXCEPTION: Error during instantiation of t! (e -> t).
but I found here it could fix the issue by using the dev libs, but now I have this :
angular2-polyfills.min.js:1 Error: EXCEPTION: Error during instantiation of ApplicationRef_! (ApplicationRef -> ApplicationRef_).
Now I'm a bit lost... For information I'm using the beta 17 version of Angular 2.
So I found a way to make it work. We cannot use Router in a constructor of an #Injectable with no #RoutesConfig, so to keep the logic I wanted, I made this in my injectable class :
doSomething(router: Router, foo: any) {
//instructions with set of link variable
router.navigate(link)
}
and now I just have to add the injectable class and the router in all my components constructors and use _className.doSomething(this._router, foo) to use the function
Hope it will help some others :)