I am struggeling to understand how exactly browsers are handling ES6 modules. I thought, that modules will only be executed the first time they are imported([modules: javascript.info][1].
Let's say i have following project structure:
js
admin.js
customers.js
index.js
customers.html
index.html
Both index.js and customers.js import the same module admin.js. When i import index.js in index.html the name of admin is changed from "John" to "Pete" and logged as expected.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modules</title>
</head>
<body>
<nav>Customers</nav>
<h1>Homepage</h1>
<script type="module" src="js/index.js"></script>
</body>
</html>
In customers.html i expected the admin's name to be "Pete" as well:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Customers</title>
</head>
<body>
<nav>Home</nav>
<h1>Customers</h1>
<script type="module" src="js/customers.js"></script>
</body>
</html>
But instead of "Pete", "John" is logged again.
Modules i used:
// admin.js
export let admin = {
name: "John",
};
//index.js
import { admin } from "./admin.js";
admin.name = "Pete";
console.log(admin.name); // Pete
// customers.js
import { admin } from "./admin.js";
console.log(admin.name); // Pete
[1]: https://javascript.info/modules-intro#a-module-code-is-evaluated-only-the-first-time-when-imported)
As Felix said above, each page render/rerender would then reload all assets. This is the difference between a Single Page Application and a Multi Page Application. You're working with an MPA, so you would need some form of data persistence between pages, such as databasing the data server side and requesting it on each page load, or placing the necessary persisted data in something like localStorage or sessionStorage for access between pages.
Related
I want to use axios in my simple project but it doesn't work but when I use CDN for axios it works..!!
HERE'S THE MY CODE
<!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>
<script type="module" src="./app.js"></script>
</body>
</html>
APP.JS
import { axios } from ("axios");
const getData = async () => {
const data = await axios.get("https://swquotes.herokuapp.com/random");
console.log(data);
};
window.onload = getData();
I want to know ho can i use npm packages directly in my project without react
If you have access to node_modules then you can import it directly from the folder, even though thats dirty and is not recommended.
<script src="node_modules/<your_package>/dist/<entry_file>"></script>
Your problem is a little different, just to narrow it a little down - the browser doesnt understand your import statement as it has to be transpiled with webpack.
import { axios } from ("axios");
So unless you import directly from CDN or use our dirty shown way of importing it - it wont and should not work
I'm trying to load two day.js plugins on the client-side. But it doesn't seem to be working... what am I doing wrong?
Pug / Jade file
script(defer, src='javascript/external/day.js')
script(defer, src='javascript/external/day_minmax.js')
script(defer, src='javascript/external/day_isbetween.js')
script(defer, dayjs.extend(window.dayjs_plugin_minmax))
script(defer, dayjs.extend(window.dayjs_plugin_isbetween))
console output
dayjs.max()
Uncaught TypeError: dayjs.max is not a function
The loaded js plugin files are from:
https://unpkg.com/dayjs#1.9.1/plugin/isBetween.js
https://unpkg.com/dayjs#1.9.1/plugin/minMax.js
Here is a working example inside a index.html file, you could do the same inside your root Pug/Jade file. Also i'm using cdn version, but you could also import them from your folder where you downloaded them.
window.dayjs_plugin_minmax vs window.dayjs_plugin_minMax might the problem
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/dayjs#1.8.21/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs#1.8.21/plugin/isBetween.js"></script>
<script src="https://unpkg.com/dayjs#1.8.21/plugin/minMax.js"></script>
</head>
<body></body>
<script>
const minMax = window.dayjs_plugin_minMax;
const isBetween = window.dayjs_plugin_isBetween;
dayjs.extend(minMax);
dayjs.extend(isBetween);
console.log(
"MAX: ",
dayjs.max(dayjs(), dayjs("2018-01-01"), dayjs("2019-01-01"))
);
console.log(
"MIN: ",
dayjs.min(dayjs(), dayjs("2018-01-01"), dayjs("2019-01-01"))
);
console.log(
"BETWEEN: ",
dayjs("2016-10-30").isBetween("2016-01-01", "2016-10-30", null, "[)")
);
</script>
</html>
And this is the result:
On the official website there is a "hidden" section with example import of plugins with browser.
https://day.js.org/docs/en/plugin/loading-into-browser
Worked for me like as they say:
<script src="path/to/dayjs/plugin/advancedFormat"></script>
<!-- Load plugin as window.dayjs_plugin_NAME -->
<script>
dayjs.extend(window.dayjs_plugin_advancedFormat)
</script>
I have created a Dart HttpServer which shows "HTML" code on the browser but I also want to connect "CSS" & "JS" to this HTML,
How should I do that? please help
HttpServer _server;
_server = await HttpServer.bind(InternetAddress.anyIPv4, port);
_server.listen((request) async {
request.response
..headers.contentType = ContentType.html
//HTML Code
..write('''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<! -- <link rel="stylesheet" href="styles.css"> -->
<title>Hello World</title>
</head>
<body>
<p>Hello WOrld</p>
</body>
<! -- <script src="app.js"></script> -->
</html>
''');
await request.response.close();
}
PS 1: One Solution is to add CSS and JS codes in the HTML code which would work but is less efficient.
PS 2: I am using this dart code in a flutter project.
Just use html tag.
Don't neglect every source imported by html tag is a http request. you should handle these requests. Dart HttpServer doesn't handle these.
Can someone explain the WHY of how Import Vue from 'vue' breaks the rendering of the template? I've seen other answers on how to work around this, but none of them have gone into the details of why it breaks.
I ran npm init and npm install vue, not using the CLI.
I created an index.html file:
<!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></title>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<first-task></first-task>
{{msg}}
</div>
<script src="app.js"></script>
</body>
</html>
and an app.js looking like:
import Vue from 'vue/dist/vue.js'; //Remove to fix
Vue.component('first-task', {
template: '<p>Hello World!</p>'
});
var app = new Vue({
el: '#app',
data: {
msg: "Hello World"
}
});
Removing the import, it renders fine, but it's unclear to me why this happens. My only guesses are that the default new Vue doesn't reference the full build, or that the implicit Render() doesn't get called, but I'm unsure of how to look into this more.
import statements may only appear in a javascript module
<script type="module" src="app.js"></script>
Should fix it, though you would not need to import Vue with your current code anyway, as you have seen
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>