"ReferenceError: ReactRedux is not defined - javascript

I am following the Redux tutorial and trying to include Provider. I am using JSbin
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script scr="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.5/react-redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
<script src="https://wzrd.in/standalone/expect#latest"></script>
<script src="https://wzrd.in/standalone/deep-freeze#latest"></script>
<title>JS Bin</title>
<script src="https://fb/react-0.14.3.js"></script>
<script src="https://fb/react-dom-0.14.3.js"></script>
</head>
<body>
<div id='root'></div>
</body>
</html>
JS File:
const { Provider } = ReactRedux;
However I am getting the error:
"ReferenceError: ReactRedux is not defined
What am I doing wrong?

In your snippet you posted, you have scr and not src.
<script scr="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.5/react-redux.js"></script>
Should be
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.5/react-redux.js"></script>

Related

How to import variable from another html file? (I use import/export, but error occurs)

//test_1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>DB Test</title>
</head>
<body>
<script type="module">
var num = 1;
console.log(num)
export {num}
</script>
</body>
</html>
//test_2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>DB Test</title>
</head>
<body>
<script type="module">
import {num} from './test_1.html'
console.log(num)
</script>
</body>
</html>
I want to use variable named num in test_1.html and test_2.html, but when I open test_2.html, error like 'test_1.html:1
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.' occurs and console.log(num) at test_2.html doesn't work properly. How can I import/export properly?
You can't import from an HTML file in this manner.
Is it possible for you to move the modules into separate JS files such as test_1.js and test_2.js then have test_2.js import from test_1.js instead?
EDIT
Like this:
<!-- test_1.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>DB Test</title>
</head>
<body>
<script type="module" src="/test_1.js"></script>
</body>
</html>
// test_1.js
var num = 1;
console.log(num);
export { num };
<!-- test_2.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>DB Test</title>
</head>
<body>
<script type="module" src="/test_2.js"></script>
</body>
</html>
// test_2.js
import { num } from "./test_1.js";
console.log(num);

ReferenceError: ok is not defined at QUnitAsserter.assertTrue in Kotlin Javascript

Kotlin versions 1.0.x-1.1.0 support out of the box unit testing with QUnit but when I load tests it throws this exception:
ReferenceError: ok is not defined
at QUnitAsserter.assertTrue_4mavae$ (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:50:5)
at assertTrue (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:93:27)
at QUnitAsserter.assertTrue_o10pc4$ (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:47:5)
at QUnitAsserter.Asserter.assertEquals_lzc6tz$ (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:182:10)
at assertEquals (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:108:20)
at AppTest.myFirstTest (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/app_test.js:17:5)
at Object.<anonymous> (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/app_test.js:29:21)
This is my test class:
import org.junit.Test
import kotlin.test.assertEquals
class AppTest {
#Test fun myFirstTest() {
assertEquals(1, 1, "Test in test folder works")
}
}
This is the html code that loads the test:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fibonacci Counter</title>
<link rel="stylesheet" href="css/app.css">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.1.1.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<footer id="info">
<p>Placeholder</p>
</footer>
<span id="text"></span>
<script src="external_libs/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/qunit/qunit-2.1.1.js"></script>
<script src="lib/kotlin.js"></script>
<script src="lib/kotlin-test-js.js"></script>
<script src="app_main.js"></script>
<script src="app_test.js"></script>
</body>
</html>
The problem is in the version of QUnit 2.1.1, by using version 1.23.1 the problem is solved.
This is the html code that loads the test with the fix:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fibonacci Counter</title>
<link rel="stylesheet" href="css/app.css">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.23.1.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<footer id="info">
<p>Placeholder</p>
</footer>
<span id="text"></span>
<script src="external_libs/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/qunit/qunit-1.23.1.js"></script>
<script src="lib/kotlin.js"></script>
<script src="lib/kotlin-test-js.js"></script>
<script src="app_main.js"></script>
<script src="app_test.js"></script>
</body>
</html>

My page won't load (ReactJS)

I'm connected to my server via npm install -g http-server on Terminal, that's working fine. I just want to see if my h1 tag works so I can proceed to making a practice website. I feel like my mainPage.html may be a little off.
Here's my mainPage.html file:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
</body>
<div id="website"></div>
<script type="text/babel" src="mainPage.js"></script>
</script>
</html>
Here's my mainPage.js file:
var Website = React.createClass({
render: function() {
return(
<h1>Why won't my h1 tag appear!</h1>
);
}
});
ReactDOM.render(<Website/>, document.getElementById('website'));
You need to import babel.js, react and reactDOM
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
Include the reference of react, react-dom and babel, Check this working code:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
</head>
<body>
</body>
<div id="website"></div>
<script type="text/babel" >
var Website = React.createClass({
render: function() {
return(
<h1>Why won't my h1 tag appear!</h1>
);
}
});
ReactDOM.render(<Website/>, document.getElementById('website'));
</script>
</html>

Can't access JS function in a different JS file?

I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>some_stuff</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="img/ico" href="/some_stuff/favicon.ico">
<link rel="stylesheet" href="/some_stuff/stylesheets/main.css">
<body>
<script type="text/javascript" src="/some_stuff/javascripts/main.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<MY_API_KEY>&callback=initialize">
</script>
</body>
</head>
</html>
This is the contents of my main.js:
function initialize() {
console.log("Initialized!");
// Do other stuff to render the map
renderMap();
}
For some reason, this is throwing the error Uncaught TypeError: window.initialize is not a function in the browser.
However, if I change my code to:
<!DOCTYPE html>
<html>
<head>
<title>some_stuff</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="img/ico" href="/some_stuff/favicon.ico">
<link rel="stylesheet" href="/some_stuff/stylesheets/main.css">
<body>
<script type="text/javascript" src="/some_stuff/javascripts/main.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<MY_API_KEY>&callback=initialize">
</script>
<script>
function initialize() {
console.log("Initialized!")
}
</script>
</body>
</head>
</html>
and main.js just contains
renderMap()
then everything works. What gives?

Displaying blank page in browser after running simple testcase in qunit

I am new to qunit.I am running simple testcase in qunit.but nothing is getting displayed on screen.
This is HTML Runner:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Demo</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css">
<script src="//code.jquery.com/qunit/qunit-1.14.0.js"></script>
<script src="MyJsUnitTests.js"></script>
<script src="MyJsSourceCode.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
This is MyJsSourceCode.js
var ArthimeticOperations = {
addTwoNumbers : function (number1, number2) {
return number1 + number2;
}
}
This is MyJsUnitTests.js
test('Addition Test', function () {
strictEqual(ArthimeticOperations.addTwoNumbers(3, 5), 8, "Tested the addition functionality");
});
Try swapping the source code and test code includes... my guess is that your tests start running before the source code is included in the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Demo</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css">
<script src="//code.jquery.com/qunit/qunit-1.14.0.js"></script>
<!-- SWAP THESE TWO...
<script src="MyJsUnitTests.js"></script>
<script src="MyJsSourceCode.js"></script>
Like so:
-->
<script src="MyJsSourceCode.js"></script>
<script src="MyJsUnitTests.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>

Categories

Resources