I can not import something into my module (mjs-file) - javascript

I have here a Chrome Extension and can not import anything to my main (index.mjs) script into it.
index.mjs File:
import Browser from "webextension-polyfill";
const port = Browser.runtime.connect();
index.html File:
<!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>
<input id="input-el" type="text">
<button id="submit-btn"> submit </button>
</div>
<div id="content-El"></div>
<script src="index.mjs"></script>
</body>
</html>
Error: Uncaught SyntaxError: Cannot use import statement outside a module [index.mjs:1]
I tried to a lot of things.
type="module" in my html
rename file ending to mjs & js

Related

How should I display header and footer on other than 'Home' page?

Should I do traditional copy paste the header and footer on every page, or is there any way that I can display it using JavaScript on every page!
Just expecting that if I would save some kilobytes on my .html files by rendering my header and footer on each page via JavaScript?
I agree that it will make life lot simpler, but in response to your query, utilise javascript as follows.
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>Document</title>
<script type=module src="./index.js"></script>
</head>
<body>
<my-header></my-header>
<h1>Home Page</h1>
<my-footer></my-footer>
</body>
</html>
about.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>Document</title>
<script type=module src="./index.js"></script>
</head>
<body>
<my-header></my-header>
<h1>About Page</h1>
<my-footer></my-footer>
</body>
</html>
contact.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>Document</title>
<script type=module src="./index.js"></script>
</head>
<body>
<my-header></my-header>
<h1>Contact Page</h1>
<my-footer></my-footer>
</body>
</html>
index.js
class MyHeader extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<header>
<nav>
<ul>
<li><a href=index.html>Home</a></li>
<li><a href=about.html>About</a></li>
<li><a href=contact.html>Contact</a></li>
</ul>
</nav>
</header>`;
}
}
customElements.define("my-header", MyHeader);
class MyFooter extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<footer>
© 2022 My Company
</footer>`;
}
}
customElements.define("my-footer", MyFooter);
Hope this helps you.
I would seriously recommend using a frontend framework, such as Angular, Vue, Svelte, etc. You can create components for your headers and footers and then reused these across multiple places.

how to create webpack multi page app with single core

hi recently I was working on SPA but for SEO purposes i decided to change my app to a multi-web page app (that they are SPA) and the core.js is identical between all pages and main.js file will drive my core.js and drow somthing in browser
i want my dist folder be like this picture
and my index.html (home page) be like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>mori</title>
</head>
<body>
<h1>this is from main page</h1>
tutorial
<script src="/core.js"></script>
<script src="/main.js"></script>
</body>
</html>
and all other view fllow same pattren
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tutorial</title>
</head>
<body>
<h1>this is for tutorial page</h1>
main page
<script src="/core.js"></script>
<script src="/tutorial/main.js"></script>
</body>
</html>

Getting Uncaught ReferenceError: exports is not defined

I am taking an input value from one page and on clicking a button I want to display it on another page in HTML.
I have exported my onclick function from one ts file and imported it in another.
Here's my TypeScript code for exporting:
var txt: HTMLInputElement=<HTMLInputElement>document.getElementById("text");
var dis=document.getElementById("dis")
export function send(){
return txt.value
}
here's the HTML for the same:
<!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>
<link rel="stylesheet" href="menu bar.css">
<script src="cart.js" defer></script>
</head>
<body>
<input type="text" name="Number" id="text">
<button onclick="send();"></button>
<p id="dis"></p>
</body>
</html>
The importing page HTML is this:
<!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">
<script src="import.js" defer></script>
<title>Document</title>
</head>
<body>
<p id="display"></p>
</body>
</html>
And here's the TypeScript for it:
import { send } from "./main/cart";
var p =document.getElementById("display")
p.innerHTML+=send()
But I am getting Uncaught ReferenceError: exports is not defined
Most browser support commonjs modules. So you need to compile using babel if you code like that.
Here you can either use babel or write below codes.
module.exports = function send(){ //codes };
And import as....
let send = require("./main/cart");
Other code remains the same.

Import class from module without ES6

I am attempting to use Material's snackbar with ES5 JavaScript. By doing this, I can't use ES6's import functionality. Therefore, I am referencing the CSS file and JS file through link href='...' and script src='...'.
When declaring a variable with var snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar')), I receive the error:
Snackbar.aspx:722 Uncaught ReferenceError: MDCSnackbar is not defined
Here is my HTML:
<!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="../_catalogs/masterpage/Custom/snackbar/node_modules/#material/snackbar/dist/mdc.snackbar.min.css">
<script src="../_catalogs/masterpage/Custom/snackbar/node_modules/#material/snackbar/dist/mdc.snackbar.min.js"></script>
</head>
<body>
<div class="mdc-snackbar">
<div class="mdc-snackbar__surface">
<div class="mdc-snackbar__label" role="status" aria-live="polite">
Can't send photo. Retry in 5 seconds.
</div>
<div class="mdc-snackbar__actions">
<button type="button" class="mdc-button mdc-snackbar__action">Retry</button>
</div>
</div>
</div>
</body>
<script>
var snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));
</script>
</html>
How can I 'import' MDCSnackbar without using ES6's import functionality?
You could use the CDN version maybe as explained in their docs Material-ui cdnhere is the github example of the material-ui cdn example.

threejs cannot be found

Hi I am trying to build the "get started" application from the threejs website. https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene
I made a html like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script>"/js/three.min.js"</script>
<script type="module" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>
I specified my view.js as a module since I want to be able to use the import statement to import my typescript files, but when I try to show my application in the browser I get the message THREE not found.
I tried adding it with yarn but it does not work.
This is my structure
Your three.min.js file is wrongly included. Your HTML should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script type="text/javascript" src="./js/three.min.js"></script>
<script type="text/javascript" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>

Categories