import _ from 'lodash';
<!-- begin snippet: js hide: false console: true babel: false -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.21/lodash.js" ></script>
<script type="module" src="./script.js" defer></script>
<title>Quiz</title>
</head>
I get this error code in the console whenever I try to import lodash and my whole program stops working.
Uncaught SyntaxError: Cannot use import statement outside a module
Related
I'm getting this same error everytime I try to run my JS file on Node. I just got started with this whole thing so I'm probably overlooking some very obvious detail. This is what my HTML head section looks like:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="rooks.css">
<title>Rooks</title>
<script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script>
<script src="rooks.js"></script>
<script src="plotly-2.12.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.js"></script>
</body>
</html>
jsx page
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<h1>Hello</h1>, document.getElementById("root"))
I get this error when I write a simple react code. Why am I getting this error?
I want to use EditorJS in my project. So I have created an HTML file after reading the documentation. Here is the file called index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<script>
import EditorJS from '#editorjs/editorjs'
const editor = new EditorJS('editorjs')
</script>
</body>
</html>
After opening the file into the browser, EditorJS is not showing up and this message is printed in the console- Uncaught SyntaxError: Cannot use import statement outside a module.
How to fix this problem?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script>
const editor = new EditorJS({
autofocus: true
});
</script>
</body>
</html>
When you add a script tag in your HTML file, you don't need to import the library again you can just start using it!
The script isn't a type module, use:
<script type="module">
Installed node_modules and added faceapp.js as a dependency. Trying to use faceapp.js but didn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/faceapp/bin/faceapp.js"></script>
<script src="assets/js/script.js"></script>
</head>
<body>
<h1 class="text-center">Faceapp</h1>
</body>
</html>
Javascript
const faceapp = require('faceapp');
let image = await faceapp.process('assets/images/ajith.jpg', 'smile_2');
Seems like you're trying to add an npm module to a static web. You'll need to bundle the script and required modules that you're using first and include the bundled script to your static html.
I recommend looking at browserify or webpack on how to do so.
I'm starting on learning EmberJS and I see this error in the console :
Uncaught TypeError: Cannot call method 'proto' of undefined ember-1.0.pre.min.js:17
It seems that just by including the library I get that error. Does anyone have any idea why I get that ?
EDIT : Added HTML Markup
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script type="text/x-handlebars">
{{#view App.MyView}}
<h1>Hello world!</h1>
{{/view}}
</script>
<!-- The missing protocol means that it will match the current protocol, either http or https. If running locally, we use the local jQuery. -->
<script src="js/libs/jquery-1.7.2.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/libs/ember-1.0.pre.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Also there's this JS in the app.js file :
var App = Em.Application.create();
App.MyView = Em.View.extend({
mouseDown: function() {
window.alert("hello world!");
}
});
but it has been removed and all the templating part from the HTML as well, and I still got the same error (:
From the Ember Documentation:
Every Ember app should have an instance of Ember.Application. This
object will serve as the globally-accessible namespace for all of the
other classes and instances in your app
The key here is "global". Here's an example of an application:
window.App = Ember.Application.create();
Your problem is the var-keyword on your Application.create. Remove that and add Window to make the error disappear.