I'm trying to modify an example in this website. I run this example on GoogleChrome, But the compiler or whatever it is, gives me the following error
"Uncaught ReferenceError: store1 is not defined".
in my browser, I type the following: localhost/helloext/index.html and I expected to see the result is, RadarFillExample as in the above mentioned website.
index.html Contains the following:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app2.js"></script>
</head>
<body></body>
</html>
app2.js Contains the sourceCode available in the above mentioned website.
And the files(index.html, app2.js and extjs directory) are located inside D:\xampp\htdocs\helloext\
Can anyone tell me how to fix this error, so that i can modify the code?
your help is appreciated
From the error message, its clear that your store named store1 is not defined.
The data store for the example comes from another file namely: example-data.js. Your application should have access to this file or you should define a store with proper data for plotting the graph.
It's been year but I faced this problem today and would like to share a solution.
Yes, you are missing the example-data.js file which is to be referenced from the HTML page. This .js file creates the data that is populated in the chart.
example-data.js can be found under extjs/examples/example-data.js. Note: extjs is the unzipped folder which you downloaded from sencha.com.
Related
I am working on a project under CMS, I do not have any access to server.
so I downloaded below 4 files
browser.min.js jquery.min.js react.js react-dom.js
remarkable.min.js
and loaded on the html page. Everything works fine before I use import.
import { sample } from './sample';
Makes Uncaught ReferenceError: require is not defined on React
I am not able to install weback or Browserify on the server, so have to load from somewhere.
Anyone has got a solution for this?
This might be what you're looking for.
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-
dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.23/browser.min.js"></script>
</head>
I downloaded React version 15 and created the following html document:
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
// React Code Goes Here
var MyComponent = React.createClass({
render: function(){
return (<h1>Hello, {this.props.name}!</h1>);
}
});
ReactDOM.render(
<MyComponent name="world" />,
document.getElementById('container')
);
</script>
</body>
</html>
The same works fine in jsfiddle but not on my machine. I want to avoid installing React dev tools or anything extra. Is that possible to get it to work with what I have or do I absolutely need to install something else?
There are tons of tutorials out there but they all seem to be missing something to get me started
If you're sure you have the react.js and react-dom.js files in a folder called build at the same level as that html page, the only thing missing would be:
a script include for babeljs in order for you to be able to use the JSX code you have in the body's script tag, add this to the <head> tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
As a precursory statement, I just want to make sure to mention that you probably won't want to do in-browser transpilation from JSX->JS for anything other than playing around with the technology. In a production environment you would want to precompile your JSX server-side or during a build step.
That being said, therein lies your problem: you're attempting to include JSX directly in the browser code, without including anything to do browser-side compilation for you.
Based on what I can see, it looks like the latest and greatest approach is to use <script type="text/babel"> now, instead of <script type="text/jsx">, and the compilation is accomplished via babel's browser.js.
This guide here appears to be mostly up to date: https://www.sitepoint.com/getting-started-react-jsx/
I'd say that if you are just starting react, a really good project to look at would be create-react-app. It does all the magic for you with one simple set up
We have UI-Grid components loaded from http://ui-grid.info like below :
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css"></link>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
And all these are failing to load today as of 18-May-2016, Is this site down ??
How can i get all these files back again as we are not supposed to have downtime for our apps.
Also is it suggested to load these files locally and have a reference for the same ??
Any help would be much appreciated.
Yeah looks like it is down, the Domain name has been canceled.
When you link to external libraries you are always at the mercy of the publishers, they could decide to block remote linking whenever they want to or close the site down.
Anyways your source files luckily still available on GIT: https://github.com/angular-ui/ui-grid
Me too waiting to see something on it's documentation:
BTW, to your problem , replace those broken urls with followings:
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.css
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.js
https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid-csv-export.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/pdfmake.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/vfs_fonts.js
I am not sure about ng-grid-csv-export.js but others should be OK.
Up until now I was using links to minified AngularJS files in my code, but now there is a requirement because of which I have to use complete AngularJS file. I have downloaded it from the official site, and:
<script src="../Angular/angular.js"> </script>
<script src="../Angular/angular-animate.js"></script>
<script src="../Angular/angular-aria.js"></script>
<script src="../Angular/angular-cookies.js"></script>
<script src="Angular/angular-loader.js"></script>
<script src="../Angular/angular-message-format.js"></script>
<script src="../Angular/angular-messages.js"></script>
<script src="../Angular/angular-mocks.js"></script>
<script src="../Angular/angular-resource.js"></script>
<script src="../Angular/angular-route.js"></script>
<script src="../Angular/angular-sanitize.js"></script>
<script src="../Angular/angula-scenario.js"></script>
<script src="../Angular/angular-touch.js"></script>
and this is how I added all these files in my code, but it is not working, please let me know what is the correct way of using complete AngularJS file.
Your path for angular-loader is different from the rest of your paths. I'm not sure if any of them are correct. I'd recommend starting the Chrome developer tools and then going to the Network tab to see if all of your resources are loading correctly.
Looking at your codepen it appears that you are reloading the Angular libraries later in your HTML. That is probably causing Angular to reinstantiate and therefore destroying whatever you've done in your code in between. Try deleting or commenting out the lines where you load Angular from cloudflare.
I've just downloaded a fresh copy of angular.min.js, and I'm getting a 404 on angular.min.js.map, which I'm not including in my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="js/angular.min.js"></script>
</body>
</html>
The error in Chrome:
GET http://angular.dev/js/angular.min.js.map 404 (Not Found)
Open the angular.min.js file in a text editor. There will be a comment at the end like this:
//# sourceMappingURL=angular.min.js.map
Delete that and the error will disappear.
A map file facilitates regenerating the minified version of a script based on changes to a non-minified version. Since you won't be making changes to angular.js, you don't need the map.
I read somewhere source map files basically turn minified code into its un-minified version for debugging purpose.
You can get rid of this error {angular.min.js.map 404 (Not Found)}
message by following anyone below :-
First way
1.You just have to find the same .map file for angular.min.js which you have included.
(eg. For angularJs minified version 1.5.6 .map files can be downloaded from Here )
Just copy-paste them to the same directory where you have uploaded your minified js files and it'll stop complaining.
The reason they get fetched is the below line which you can find when you open the angular.min.js file.
//# sourceMappingURL=angular.min.js.map
which can be found at the end of the angular.min.js file.
Second way
If you don't want to add the .map files to your project.
You can remove above line and it'll stop fetch attempt, but if you plan on debugging it's always good to keep the source maps linked.