I'm running a local environment (Live Server) running React.
I've installed the following packages to make sure the correct operation:
react 17.0.2
react-dom 17.0.2
I want to run a custom navbar made by me, but it returns the following error from the browser side.
Uncaught SyntaxError: Unexpected token '<' main.js 18
These are the files I am working with:
main.js
import React from 'react';
import ReactDOM from 'react-dom';
const navbar = () =>
{
<div>
<h1>Computers</h1>
<div>
<ul>
<li>Pricing</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
}
ReactDOM.render(navbar, document.querySelector(".nav"));
package.json
{
"name": "project1_staticpage",
"version": "1.0.0",
"description": "",
"main": "main.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"/>
<meta name='viewport' content='width=device-width, initial-scale=1'/>
</head>
<body>
<div class="nav">
</div>
<script type="module" src='main.js'>
</script>
</body>
</html>
I've search the possible issues about this and I found out the interpreter was expecting json, but it received < or HTML.
And it seems that the solution to this is to make sure that the whole javascript script path is correct, although from my point of view it is.
If it helps this is my directory structure
enter image description here
First of all, the browser doesn't understand JSX syntax, so you need first to transpile main.js to a file that can be understood by the browser. Take a look to this tutorial
Related
I installed sweetalert2 by npm install sweetalert2.
How i can use it in html file. Below code does not work for me.
<!-- index.html -->
<!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>
<script type="module" src="./index.js"></script>
</head>
<body>
<p>Hello from index.html</p>
<button onclick="alertsw()">Click me</button>
</body>
</html>
index.js
console.log("This is index.js from root directory")
import Swal from './node_modules/sweetalert2/src/sweetalert2.js'
function alertsw(){
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Your work has been saved',
showConfirmButton: false,
timer: 1500
})
}
The error is:
Uncaught ReferenceError: alertsw is not defined
at HTMLButtonElement.onclick
package.json
"scripts": {
"build": "browserify index.js -o dist/bundle.js",
"watch": "watchify index.js -o dist/bundle.js -v"
},
Can someone help me, I'm building my first chrome extension and it's a popup with a button that's supposed to do something on click (just using alert now), but somehow whatever in my js file doesn't seem to be working. Styles also seem not to load.
manifest:
{
"name": "Toolbar",
"manifest_version": 2,
"version": "1.0.2",
"description": "Toolbar",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "None",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "http://*/", "https://*/"
]
}
popup.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="popup.js"></script>
</head>
<body>
<div>
<button type="button" id="closeButton"> x<button/>
</div>
</body>
</html>
popup.js:
function closePopup ()
{
//window.close();
alert("hello");
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('closeButton').on("click", function (){
closePopup();
}
});
});
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<!--<script src="popup.js"></script> delete this-->
</head>
<body>
<div>
<button type="button" id="closeButton"> x<button/>
</div>
<!--add this--><script src="popup.js"></script>
</body>
</html>
place the script after the object, where the eventlistener is placed on. I had the same problem and that fixed it
You've got to put the <script src="popup.js"></script> in the <body> instead of <head> tag. That worked for me.
I'm using Angular 2 with materialize-CSS. The issue I'm having is when I shrink the page to where the hamburger appears for the side-nav, after I click the hamburger, the side-nav never pops up and the screen darkens significantly. It never slides out like it should.
My Component is below
import { Component, OnInit, ElementRef } from '#angular/core';
declare var jQuery: any;
#Component({
selector: 'core-app',
template: `
<div class="navbar">
<nav class="indigo">
<div class="nav-wrapper">
{{title}}
<a href="#" data-activates="nav-mobile" class="button-collapse" materialize="sideNav"
[materializeParams]="[{menuWidth: 300,edge: 'left', closeOnClick: true, draggable: true}]"><i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li><a routerLink="/dashboard">Dashboard</a></li>
<li><a routerLink="/fast">Fast Words</a></li>
<li>extra link</li>
<li>Logout</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li><a routerLink="/dashboard">Dashboard</a></li>
<li><a routerLink="/fast">Fast Words</a></li>
<li><a routerLink="/dashboard">Dashboard</a></li>
<li><a routerLink="/fast">Fast Words</a></li>
</ul>
</div>
</nav>
</div>
<router-outlet></router-outlet>
`
})
export class AppComponent implements OnInit {
title = 'Rapid Words';
constructor(private el:ElementRef){}
ngOnInit() {
jQuery(this.el.nativeElement).find('.button-collapse').sideNav();
}
}
This is my index.html page. I commented out materialize CSS/jQuery, but then I lost all my styles.
<html>
<head>
<title>Language Forge | Review & Rapid Words</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Import Materialize CSS -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<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/reflect-metadata/Reflect.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>
</head>
<!-- 3. Display the application -->
<body>
<base href="/">
<core-app>Loading...</core-app>
</body>
</html>
Here is my packageJS file. I believe I have all the correct dependencies:
"dependencies": {
"#angular/common": "~2.1.1",
"#angular/compiler": "~2.1.1",
"#angular/core": "~2.1.1",
"#angular/forms": "~2.1.1",
"#angular/http": "~2.1.1",
"#angular/platform-browser": "~2.1.1",
"#angular/platform-browser-dynamic": "~2.1.1",
"#angular/router": "~3.1.1",
"#angular/upgrade": "~2.1.1",
"angular-in-memory-web-api": "~0.1.13",
"angular2-materialize": "^6.1.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^2.2.4",
"materialize-css": "^0.97.8",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"#types/core-js": "^0.9.34",
"#types/node": "^6.0.45",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3"
},
How can I resolve this so that side-nav slides out like it should?
Related stack overflow question, but does not solve my problem because I'm using angular 2. After adding this style tag to my component, the side-nav shows, but doesn't let me click off of it, and the screen stays dark.
materialize css: Always show side-nav even on mobile?
Code Pen - works okay in Code Pen so it must be related to Angular 2
https://codepen.io/abramjstamper/pen/BQLaQY
Figured out the problem, it was a combination of import issues. Hope this helps someone else experiencing the same issues with Angular2-Materialize.
index.html
<!-- Compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.css"/>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Import jQuery before materialize.js -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/materialize-css/dist/js/materialize.min.just sayin"></script>
main.ts
import 'angular2-materialize';
system config
map = {
'materialize-css': 'npm:materialize-css',
'angular2-materialize': 'npm:angular2-materialize',
'jquery': 'npm:jquery'
},
packages: {
'materialize-css': {
"format": "global",
"main": "dist/js/materialize",
"defaultExtension": "js"
},
'angular2-materialize': {
"main": "dist/index",
"defaultExtension": "js",
}
}
Trying to set a radio (yes or no) default (Yes) building a chrome extension...
Saw lots of other posts whit similar error
Cannot read property 'setAttribute' of null
but the solutions:
document.getElementById('Yes').checked = "checked";
didn't work for me.
Thanks in advance for helping.
Manifest.json
{
"manifest_version": 2,
"name": "Yest or No",
"description": "Yes or No",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["jQuery-v1.10.0.js", "script.js"],
"persistent": false
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
]
}
Popup.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
</head>
<head>
<title>Yes or No</title>
<script src="jQuery-v1.10.0.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
script.js
$( document ).ready(function() {
document.getElementById('Yes').setAttribute('checked', 'checked');
});
test.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="padding-top: 5px">
<span style="font-size:12px">
<input type="radio" name="FotoPadrao" id="Yes" value="1"> Yes
<input type="radio" name="FotoPadrao" id="No" value="0"> No
</span>
</div>
</body>
I'll jump straight to the answer; you need to add a radio button to your HTML, but first, let's go through your code.
Since you use jquery, there is no need to do document.getElementById, you can use the jquery selector
$("#radio").prop('checked',true);
This snippet will check a radio button for the id "radio".
The code you posted did not have an radio button and this is why you had an error : when getElementById tried to find your input, it did no detect it, so it returned null. Javascript cannot change the attribute of a null object, so it throwed an exception, halting your code.
Here is a snippet of how it should have been :
https://jsfiddle.net/gctkhvm4/1/
I recommend you read up on HTML and jquery here :
http://www.w3schools.com/
It contains great ressources to get started
Edit: I updated the fiddle to take in account the missing html file
The problem might come from the fact that you're trying to set the id of an element not in the same file as the script
I had to add pure java script in a content_scripts... code is updated.
I'm working on a NodeJS project with Express in Webstorm. I'm making a reference to a Javascript file from an EJS(HTML) file.
<script src = "public/javascripts/DivManipulations.js">
</script>
But the file that Chrome retrieves is the same EJS file instead of Javascript. I'm not sure why this is happaning.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src = "public/javascripts/DivManipulations.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("h1").toggle(); //This toggle part works
remoteScriptTest("Hi"); //This remoteSrciptTest does not.
});
});
function testCall(){
window.alert("Hi");
}
</script>
</head>
<body style="padding: 0px; margin: 0px;">
<div id="root"></div>
<div style="background-color: red; width: 100px; height: 60px; overflow: auto;">
<span>Some text comes here</span>
</div>
<h1><%= title %> </h1>
</p> Welcome to <%= title %> </p>
<button>Click here</button>
</body>
</html>
Here's the js file:
/**
* Created by ---- on 11/21/13.
*/
function remoteScriptTest(message){
window.alert(message);
}
Here's the package.json
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.4.4",
"ejs": "*"
}
}