Import/export module in JavaScript - javascript

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

Related

Unable to run code of Reactjs code on live server

I am a newbie and wrote this code from a tutorial. This code is not giving "Hello World" output when I open it with live server
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
crossorigin
src="https://unpkg.com/react#17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"
></script>
<title>Learning React</title>
</head>
<body>
<div id="root"></div>
<script>
class App extends React.component {
render() {
return React.createElement("div", null, "Hello World");
}
}
ReactDOM.render(
React.createElement(App, null),
document.getElementById("root")
);
</script>
</body>
</html>
React.component needs to be with capital c: React.Component:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
crossorigin
src="https://unpkg.com/react#17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"
></script>
<title>Learning React</title>
</head>
<body>
<div id="root"></div>
<script>
class App extends React.Component {
render() {
return React.createElement("div", null, "Hello World");
}
}
ReactDOM.render(
React.createElement(App, null),
document.getElementById("root")
);
</script>
</body>
</html>

why this onclick function is not defined?

layerAuthManage.jsp
<input type="button" value="일괄선택" onclick="chk_all()">
spatialInfoGuide.js
function chk_all(){
$('[name=chk]').prop('checked', true);
}
error message:
Uncaught ReferenceError: chk_all is not defined
at HTMLInputElement.onclick (layerAuthManage.do:123)
may be you did not add jquery, thats why showing this error.
you can use below solution, i think it will help. if still error then share your code to see.
<html>
<html lang="en">
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="button" value="일괄선택" onclick="chk_all()">
<script>
function chk_all(){
$('[name=chk]').prop('checked', true);
}
</script>
</body>
</html>

When using and import statement and HTML I get no output. Why?

I am getting a blank page when using import. I have a simple program that is just to test the import statement. I don't know why I am not getting any output. Here is my code in app js:
import TestComponent from "./components/Testcomponentfile"
pageBuild();
function pageBuild(){
TestComponent();
}
Here is the code for the component:
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
And Here is the index.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">
<script type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<div>
<h1> test Html</h1>
</div>
<script src="./JS/app.js"></script>
</body>
</html>
What am I missing??
Use type="module" in your html while using the script
<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">
<script type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<div>
<h1> test Html</h1>
</div>
<script type="module" src="./JS/app.js"></script>
</body>
</html>
calling pageBuild(); after defining the function did not solve the problem>
I am using google chrome browser. It should be working.
import TestComponent from "./components/Testcomponentfile"
function pageBuild(){
TestComponent();
}
pageBuild();
Here is the code for the component:
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
an update to the first answer
tc.js
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
ap.js
import TestComponent from "./tc.js"
function pageBuild(){
console.log(TestComponent());
}
pageBuild();
tested and it works

How to use React v16 without a build process

In React v15 I can easily do the following:
<html>
<head>
<meta charset="UTF-8">
<title>React v15</title>
</head>
<body>
<div id="divContainer"></div>
<script src="https://unpkg.com/react#15.6.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.6.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.min.js"></script>
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return <h2>Hello World !</h2>;
}
});
ReactDOM.render(<HelloWorld />
, document.getElementById('divContainer')
)
</script>
</body>
</html>
Once I reference react#16, react-dom#16 it no longer works, I understand that React.createClass() has been deprecated and removed. So what is its replacement?
I need a minimalist way of doing the same without a build process e.g. browserify, webpack, require, import, etc. I just want to reference libraries via a CDN or locally as I have shown in the example.
After you include React 16 libs you can access the React instance directly and extend React.Component
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>React Hello World</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/jsx">
class MyApp extends React.Component {
render() {
return <span>Hello world</span>;
}
}
ReactDOM.render(<MyApp />, document.getElementById('app'));
</script>
</body>
</html>

jQuery.load HTML containing AngularJS

I'm having trouble loading an HTML file that contains AngularJS code!
Here are my snippets:
page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="content">
</div>
<script>
$(document).ready(function () {
$('#content').load('page2.html#body');
});
</script>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
{{ value }}
</div>
<script>
//<![CDATA[
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.value = "hello world!";
});
//]]>
</script>
</body>
</html>
page2 alone works just fine! But when I try to load it inside page1, I get the following error message:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…
at HTMLDocument.eval (eval at globalEval (jquery-2.2.4.min.js:2), :294:192)
at i (jquery-2.2.4.min.js:2)
Angular needs jQuery to work (to be exact, it needs jQLite). You should import it also on page2.html, before angular.min.js.
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="jquery-2.2.4.min.js"></script>
<script src="angular.min.js"></script>
</head>

Categories