Import class from module without ES6 - javascript

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.

Related

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

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

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.

CountUp is not defined

I'm trying to use this countUp.js library to achieve that nice rising number animation. I found a cdn and put it in my code and followed a tutorial on how to use it.
Repo https://github.com/inorganik/countUp.js
CDN https://cdnjs.com/libraries/countup.js/2.0.0
Tutorial https://www.youtube.com/watch?v=cJ-T8Gb12lI
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>
<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.0/countUp.min.js" integrity="sha512-E0zfDwA1CopT4gzJmj9tMpd7O6pTpuybTK58eY1GwqptdasUohyImuualLt/S5XvM8CDnbaTNP/7MU3bQ5NmQg==" crossorigin="anonymous"></script>
</head>
<body>
<div id="counters">
<p id="counter1">0</p>
</div>
<script>
let demo = new CountUp('counter1', 0, 100);
demo.start();
</script>
</body>
</html>
This code gives me Uncaught ReferenceError: CountUp is not defined in the console.
As described in the docs on including Countup the CDN version is served as a module.
One option is to use the non-module umd version
this is what they do in their demos
const c = new countUp.CountUp("counter1", 500)
c.start()
<script src="https://inorganik.github.io/countUp.js/dist/countUp.umd.js"></script>
<div id="counters">
<p id="counter1">0</p>
</div>
I think you have not used the right source for the countup library. Try this:
let demo = new CountUp('counter1', 0, 100)
demo.start()
<script
src="https://cdn.jsdelivr.net/npm/countup#1.8.2/countUp.js"
></script>
<div id="counters">
<p id="counter1">0</p>
</div>

while using npm start in the terminal of visual studio I get an error

I am using JavaScipt ES6 with Node. I am using visual studio code. I am getting this error when I run npm start:
The error is:
× C:\Users\markp\source\repos\bioinvisionTest\index.html:1:31: Imports and requires are not supported inside inline <script> tags yet
in other programs the import works. This one it doesn't. All that is in the program is this:
<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>
</head>
<body>
<div id="demo"></div>
<script>
import TestComponent from "./components/Testcomponent"
</script>
</body>
</html>
and in the components folder there is file called Testcomponent js that contains this:
function TestComponent() {
console.log("test component js")
}
export default {
TestComponent
}
return key is somting which you can't simply ignore if it's multiline codes.
If you are uinsg Creaet-react-app as generator then i will recommend use APP.js as base and inject your component in that file for now. Later you can redesign .
If you are using only HTML and JS file then you should import react and react-dom library in your index.html file .
One page React App , place in your html file.
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Greeting extends React.Component {
render() {
return (<p>Hello world</p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
);
</script>
Modules are natively suppported
refer MDN docs
Try adding type="module" to your script tag.
<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>
</head>
<body>
<div id="demo"></div>
<script type="module">
import TestComponent from "./components/Testcomponent"
</script>
</body>
</html>

React + Add cache-busting to CSS and Js for third party url's

I am using react application.. The third party css and js files currently loaded into index.html, But my problem is when any changes updated in thrid party css/js files it;s not reflecting..
So I need to add cache busing to css and js files..
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>test</title>
<link href="https://abcd.css?v=1" rel="stylesheet" type="text/css">
<link href="https://efgh.css?v=1" rel="stylesheet" type="text/css">
<script src="https://abcd.js?v=1"></script>
<script src="https://efgh.js?v=1"></script>
</head>
<body class="test">
<div id="root"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</html>
Shall I remove the version(?v=1) ?
Or Shall i load all css/js files via js, there adding version based on time?
I am not sure which is the best method. Can you please suggest me..
App.js (sample)
import React from 'react';
import './App.css';
const App = () => {
return (
<div className="react-app">
content.....
</div>
);
};
export default App;

Categories