trying to use cropper.js:
https://github.com/fengyuanchen/cropperjs
https://fengyuanchen.github.io/cropperjs/
After downloading and unpacking files I created index.php on the root level:
<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>IMGED</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link href="src/index.css" rel="stylesheet">
</head>
<body>
<div>
<img id="image" src="img.jpg" alt='img'>
</div>
<script src="src/index.js"></script>
</body>
</html>
Console:
Uncaught SyntaxError: Unexpected identifier... index.js:1
index.js
import Cropper from './js/cropper';
export default Cropper;
What is wrong, pls?
Related
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="./app.js"></script>
</body>
</html>
app.js
import { hello } from './hello';
hello();
hello.js
export function hello() {
console.log('Hello!');
}
Uncaught SyntaxError: Cannot use import statement outside a module app.js:1
I think you need to add type to the script tag:
<script type="module" src="./app.js"></script>
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
I write a WEB application on the platform Firebase
I have a file "firebase-messaging-sw.js", and when I access the file from home.html page, I get an error:
importScripts is not
File "firebase-messaging-sw.js" is at the root level.
home.html:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="shortcut icon" href="img/favicon.png"/>
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/home.css" type="text/css" media="screen and (min-width:901px)" />
<link rel="stylesheet" href="css/mhome.css" type="text/css" media="screen and (max-width:900px)" />
</head>
<body>
<header>
...
</header>
<div class="function">
...
</div>
<footer>
...
</footer>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-performance.js"></script>
<script src="javaScript/initFirebase.js"></script>
<script src="javaScript/homeFirebase.js"></script>
<script src="javaScript/initHomePage.js"></script>
<script src="javaScript/latlon-geohash.js"></script>
<script src="firebase-messaging-sw.js"></script>
</body>
firebase-messaging-sw.js:
importScripts('https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.3.3/firebase-messaging.js');
firebase.initializeApp({
'messagingSenderId': '123456654321'
});
Help fix the error! Thank!
firebase-messaging-sw.js is service worker JavaScript file.
So you should not load JavaScript file using <script src="firebase-messaging-sw.js"></script>.
Remove <script src="firebase-messaging-sw.js"></script> and try the following code.
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/firebase-messaging-sw.js');
});
}
</script>
See https://developers.google.com/web/fundamentals/primers/service-workers/#register_a_service_worker
I've made a project in React and HTML5. Previously, to call my render function I had put my render into a global function like this:
window.shareRenderResetResult = function () {
ReactDOM.render(
<div> hello </div>,
document.getElementById('salut')
);
};
and I called it in my html page like this:
<script>
shareRenderResetResult();
</script>
Today, for an another project, I have do the same things but I now get a warning in my console:
Uncaught ReferenceError: shareRenderResetResult is not defined
at (index):207 (anonymous) # (index):207
I don't know what to do. Ideas?
my html page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>h</title>
<link rel="shortcut icon" href="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.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>
<script type="text/babel" src="{{ url_for('static', filename='JS/test.js') }}"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='node_modules/materialize-css/bin/materialize.css') }}">
<script src="{{ url_for('static', filename='node_modules/materialize-css/bin/materialize.js') }}"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://use.fontawesome.com/0b3dc57bca.js"></script>
<link rel="shortcut icon" href="">
</head>
<body>
<div class="row">
<div id="salut">
</div>
</div>
<script>
console.log("what's wrong with you ?");
shareRenderResetResult();
</script>
</body>
</html>
i have put a console.log in my function but nothing appeared.
I'm starting out with ReactJS & I want this simple image to appear on my practice web app but it isn't appearing. I thought my logic was correct but I guess not.
Here's my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>My website</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">
<link rel="stylesheet" href="index.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>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
</head>
<body>
<div id="firstBar"></div>
<div id="body"></div>
<script type="text/babel" src="index.js"></script>
<script type="text/babel" src="body.js"></script>
</body>
</html>
Here's my body.js file:
import myPic from 'pictures/myPic.JPG' // myPic.JPG is in my pictures folder.
var Body = React.createClass({
render: function() {
return(
<img src={myPic}></img>
);
}
});
ReactDOM.render(<Body />, document.getElementById('body'));
Error I'm getting is:
`Uncaught ReferenceError: require is not defined
at eval (eval at transform.run (browser.js:4613), <anonymous>:6:25)
at Function.transform.run (browser.js:4613)
at exec (browser.js:4649)
at browser.js:4661
at XMLHttpRequest.xhr.onreadystatechange (browser.js:4632)`
require/import might not be supported in the browser
Try this:
var Body = React.createClass({
render: function() {
return(
<img src={"./pictures/myPic.JPG"}></img>
);
}
});
ReactDOM.render(<Body />, document.getElementById('body'));
I am writing Jasmine tests and wanted to extend Jasmine by Jasmine-jQuery.
I downloaded the jasmine-jquery.js file added it to my libs folder and extended my SpecRunner.html like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.2.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.2.0/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.2.0/jasmine.css">
<script src="lib/jasmine-2.2.0/jasmine.js"></script>
<script src="lib/jasmine-2.2.0/jasmine-jquery.js"></script>
<script src="lib/jasmine-2.2.0/boot.js"></script>
<script src="lib/jasmine-2.2.0/sinon.js"></script>
<!-- libs -->
<script src="../../node_modules/requirejs/require.js"></script>
<script src="../../public/js/app/config/config.js"></script>
<script src="../../public/js/libs/jquery/dist/jquery.js"></script>
<!-- add spec files here -->
...
</head>
<body>
</body>
</html>
When I run a test it fails at this line...
var evtSpy = spyOnEvent('#selectLanguage', 'change');
...with this error Message:
TypeError: Cannot read property 'events' of undefined
at spyOnEvent (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine-jquery.js:30:24)
at Object.<anonymous> (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/spec/AddVehicleViewSpec.js:162:26)
at attemptSync (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:1741:24)
at QueueRunner.run (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:1729:9)
at QueueRunner.execute (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:1714:10)
at Spec.Env.queueRunnerFactory (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:608:35)
at Spec.execute (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:346:10)
at Object.fn (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:2059:43)
at attemptAsync (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:1771:24)
at QueueRunner.run (http://localhost:63342/website/jasmine_test/jasmine-standalone-2.2.0_1/lib/jasmine-2.2.0/jasmine.js:1726:9)
This means jasmine.jQuery is undefined. What is wrong there?