Why i cant import modules in JS - javascript

why i cant import my class when i am using the app.js in my html file?
In the console is always Cannot use import statement outside a module
Html snippet
<!-- Scripts -->
<!-- Bootstrap -->
<script src="assets/plugins/bs/bs.js"></script>
<!-- APP -->
<script src="assets/js/SmashTheHamster.js"></script>
<script src="assets/js/Elements.js"></script>
<script src="assets/js/Session.js"></script>
<script src="assets/js/app.js"></script>
code in app.js (there is this error Cannot use import statement outside a module) and yes i exported my modules with export defaut MODULE
import elements from "./Elements";
import SmashTheHamster from "./SmashTheHamster";
thx for help

You have to specify the type of the script tag using type="module"

Related

Can I get import declarations in my own script file from a (CDN sourced) <script type="module">

If I have a <script type="module"> in my html that comes from a CDN (and for which I know it contains exports), is it then possible to get the import declarations in a script file of my own?
i.e. in my html:
<script type="module" src="https://cdn.jsdelivr.net/npm/#.....min.js"></script>
in my own .js file
import {
bla1,
bl2
} from ---
What comes in the place of the ---?

Can't import AlertifyJS in JavaScript

When importing AlertifyJS, I am able to successfully use script tags in the HTML like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.min.js"></script>
But if I move the import into JS using import * as alertify from './AlertifyJS'; I can't get my project to recognise the library. But everything I have read says this should work, am I doing something wrong?
I have also tried other examples like;
import alertifyjs from 'alertifyjs';
import * as alertify from 'alertify.js';
var alertify = require('alertifyjs');
You can't export JS from HTML. You can import it however, using the type="module" attribute on the tag:
<script type="module">
import alertifyjs from 'alertifyjs';
alertifyjs.myAlert("Browser dialogs made easy!");
</script>

Importing bootstrap js file

I recently started using bootstrap installed from npm and i have trouble importing the js file though
this is my main js file and where i want to use all the tools
import * as bootstrap from '../node_modules/bootstrap/dist/js/bootstrap.min.js';
console.log(bootstrap);
my main .html file (where i put my js file)
<script src="Js/js_main.js" type="module"></script>
When i run my page the tools/plugins dosen't work so... Is there a way to save this tools/plugins into your own js file like sass? or which is the best way to use them?
As I understood this, you are using bootstrap via npm to create html and js page. You are trying to get object of bootstrap js file but that is not the appropriate approach because it does not return anything.
You can use the absolute path of "../node_modules/bootstrap/dist/js/bootstrap.min.js" in your html page so that bootstrap will be available in your html page.
<!doctype html>
<html lang="en">
<head>
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<!-- Custom styles for this template -->
<style>
body {
padding-top: 5rem;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
</style>
</head>
<body>
<!--MAIN HTML LAYOUT-->
</body>
</html>
Actually now in Bootstrap 5 is possible import the esm version of Bootstrap like that for example (code in the src/index.js file and node_modules folder on the same level of the js folder):
import * as bootstrap from '../node_modules/bootstrap/dist/js/bootstrap.esm.min.js'
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
In this way there is a problem with the path of Popper.js dependency.
You can open the bootstrap.esm.min.js and replace the import of Popper with:
import * as Popper from '../../../#popperjs/core/dist/esm/index.js'
The advantage in this way is that I can import only the component I want namely:
import {Popover} from '../node_modules/bootstrap/dist/js/bootstrap.esm.min.js'
but remember that each import is an http request thereby you have to use webpack for example and in that case becomes more simple handle the project (in a different slightly different way from here).

How to import module in Vue.js project properly?

The target is to import module "mint-ui".(https://unpkg.com/mint-ui#2.2.13/)
Logic of my web: Guest will visit my index.html first, and then routed by vue to certain component.
I tried to import it with
<script src="">
in my index.html, but in my certain html, when i use some function of mint-ui, it doesn't work.
I tried to
import {component} from 'mint-ui' or from 'url' or from 'path/to/js/on/disk', the page just doesn't turns out.
How should I import this module?
Thank you all very much!
mint-ui doc guide:
https://mint-ui.github.io/docs/#/en2
import mint-ui:
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
usage:
<div id="app">
<mt-button #click="handleClick">Button</mt-button>
</div>

How to load external script after Angular 2 loads

I have dynamic navigation bar which fetch data from API.
The problem is the list items in the navigation bar does not toggling consistently. It works sometimes and doesn't most of the time.
There are no script error in the console window, its clean.
The script for the navigation panel toggle is from the Metronic template itself in the file called layout.js
I am suspecting its because the layout.js loads before the angular renders in DOM sometimes. It that case the toggle doesn't work properly.
Any Suggestions please !
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="/systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="~/assets/layouts/layout/scripts/demo.min.js" defer type="text/javascript"></script>
<script src="~/assets/layouts/global/scripts/quick-sidebar.min.js" defer type="text/javascript"></script>
<script src="~/assets/layouts/global/scripts/quick-nav.min.js" defer type="text/javascript"></script>
#*<script src="~/Scripts/jquery-1.10.2.min.js"></script>*#
<script src="~/assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="~/assets/layouts/layout/scripts/layout.js" defer></script>
<!-- END THEME LAYOUT SCRIPTS -->
Try this:
Import the AfterViewInit from #angular/Core and implement it's function.
Make sure your layout.js is referenced in the scripts for your app in the angular-cli.json.
In your component.ts import your layout.js like this:
import {layout} from 'file/location/layout.js';
Edit your layout.js file to have its current code wrapped with this:
var extJs = (function() {
return{
getExtJs: function() {
//js code goes here
}
}
Back in your component declare a variable that refers to the one in layout.js:
declare var extJs: any;
Then call the layout.js function when the view has finished loading:
ngAfterViewInit(): void {
extJs.getExtJs();
}

Categories