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>
Related
I am self-learning react and I am just confused about a lot of things.
I thought that if I add React to my index.html via a script like the below:-
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bill Details</title>
</head>
<body>
<div id="billTable"></div>
<script src="BillTable.js" type="text/javascript"></script> ------------- Problem Line 1
</script>
</body>
</html>
and this is my js file where I am trying to return react component
//BillTable.js
import React from "react";
import ReactDOM from "react-dom";
function BillTable() {
return <h1>HELLO TABLE</h1>;
}
ReactDOM.render(<BillTable/>, document.getElementById("billTable"));
when I try to open index.html directly in firefox or through express server I get the below error in console:-
Uncaught SyntaxError: import declarations may only appear at top level of a module.
I then got rid of this error by changing the script type in problem line 1 in index.html to
<script src="BillTable.js" type="text/babel"></script>
but then also my webpage is completely blank and even console is not showing any errors.
Please suggest how to solve this issue. I am right now trying to learn React with functional approach only, so if any changes are required to be done on the react side, please make them in the functional approach.
I don't think you have included the correct packages to handle React components and JSX yet. These packages react, react-dom, etc. are usually in a package.json and are required to tell the browser what tools will be used to run the code. These packages handle the "script" or components you create and places the elements constructed in your components to the DOM. You can solve this by loading react with additional script tags before your component's script tag. This will let the browser know how and what to use to run your react component. Also, in your function, it does not know that it is a React Component. Check out an explanation for why you would have to use React.createElement I have attached an example of using only an index.html page here:
example of using an index.html page
Your Component file:
"use strict";
function BillTable() {
return React.createElement("h1", "", "HELLO TABLE");
}
const domContainer = document.querySelector("#billTable");
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(BillTable));
and your index.html:
<body>
<div id="billTable"></div>
<!-- Load your React packages -->
<script
src="https://unpkg.com/react#18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"
crossorigin
></script>
<!-- Load your React component. -->
<script src="BillTable.js"></script>
</body>
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"
I was trying to display my first code on the screen through React, but I didn't work as I was expected, It was nothing, and I think the problem was I called incorrect the name of element.
JS
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));
HTML
<body>
<div id="root"></div>
<script src="js-index.js"></script>
</body>
Have you tried using a relative path witth a ./ in front of the file name?
<script src="./js-index.js"></script>
Also what are you using to transpile react code to regular javascript code? Can't comment 1 rep away :/ . Reply back and Ill be happy to help!
I was using Bootstrap v3.3.6 and jQuery v2.2.4
Do i need to change the version not to get this error.
I am having index.html like below
<html lang="en">
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<body class="nav-md">
<div id="app"></div>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/custom.min.js"></script>
<script src="/bundle.js"></script>
</body>
</html>
Index.js file
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import './css/bootstrap.min.css';
import './css/custom.min.css';
import './css/style.css';
import './js/jquery.min.js';
import './js/bootstrap.min.js';
import './js/custom.min.js';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {indigoA200} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
const muiTheme = getMuiTheme({
palette: {
primary1Color: indigoA200,
primary2Color: indigoA200,
},
});
ReactDOM.render((
<MuiThemeProvider muiTheme={muiTheme}>
<Router history={browserHistory} routes={routes} />
</MuiThemeProvider>)
,document.getElementById('app')
);
I am unable to see the UI, I am getting Bootstrap's JavaScript requires jQuery
From the given messages your jQuery Bootstrap and other files seem to not be properly set up and contain some errors and javascript is run on a single thread and hence it is terminating execution without reaching the completion of file and throwing the error.
Please check your jQuery and Bootstrap files and try to use the CDN's from Getting Start with Bootstrap
As far as I am aware you have used imports wrong and if your index.html file has the src you are not required to import it within the index.js file and can use all the classes similarly. Please look at
How to include third party libraries in React
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>