var Provider = ReactRedux.Provider;
var connect = ReactRedux.connect;
i got error when calling to ReactRedux.Provider, but the error is pointing to brower.js and babel.js .
Since you're using CDN links. The url you provided doesn't export a valid export for what you're trying to do.
I tried a unpkg link and it worked fine.
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-redux#5.0.6/dist/react-redux.js"></script>
With these links the ReactRedux export exists and you can access it's components. Thus what you were trying to do will work
var Provider = ReactRedux.Provider;
var connect = ReactRedux.connect;
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 have the following in my index.js file
class PersonProfileBadge extends React.Component {
constructor(props) {
super(props);
this.alias = this.props.alias;
}
render() {
return e(
'img',
{
src: `https://internal-cdn.foo.com/somepath/?uid=${this.alias}`,
className: 'profile_photo'
}
);
}
}
and it works when I render it like so
ReactDOM.render(
e(PersonProfileBadge, {'alias': 'stupidfatcat'}),
navProfilePicture
);
But I'm trying to get JSX support since it makes the code look generally much more readable
ReactDOM.render(
<PersonProfileBadge alias='stupidfatcat' />,
navProfilePicture
);
But I'm getting this error:
Uncaught SyntaxError: Unexpected token '<'
In my index.html I have the following imports
<script src="internalcdnpathto/static/react/react.production.min.js"></script>
<script src="internalcdnpathto/static/react-dom/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="/static/index.js"></script>
Not entirely sure what I'm doing wrong or where to even get started.
You generally want to add a preprocessor in order to use JSX. The quickest way to try JSX in your project is to add this tag to your page:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
Now you can use JSX in any tag by adding type="text/babel" attribute to it. This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production.
Read more in the official React docs.
You need babel to compile your code from JSX to javascript from this:
ReactDOM.render(
<PersonProfileBadge alias='stupidfatcat' />,
navProfilePicture
);
to that:
ReactDOM.render(
e(PersonProfileBadge, {'alias': 'stupidfatcat'}),
navProfilePicture
);
You should utilize a bundler like webpack so you parse your code everytime you change something, i'd suggest creating a project via create-react-app
or take a look at Babel Standalone
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
I wish to inject two dependences in my module, but angular not accepts this very well , someone can help-me? i´m beginner in angular.
var app = angular.module('aplication', ['infinite-scroll','ngAnimate']);
sequence of scripts.
error:
Make sure you have loaded the references,
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
<script src="app.js"></script>
<script src="infinite-scroll.js"></script>
And then,
app = angular.module('application', ['ngAnimate', 'infiniteScroll']);
Demo
I've changed my script to:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
and works fine!
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 :)