I'm attempting to put my first full-stack application together and am getting an unexpected syntax error:
"Uncaught SyntaxError: Unexpected token {"
The error is coming from this line of code in my map.js file:
import {userInput} from './algorithm/searchingAlgorithm.js';
ejs file:
<head>
<script type="text/javascript" src="../javascripts/map.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCx0LvEwPUgGhpLjCErr24dOnk-VWjo83g&callback=initMap">
</script>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
from './algorithm/searchingAlgorithm.js':
export default async function userInput(origin, destination){
I've done a lot of searching and have yet to come up with an answer. I'm using node.js/express and express generator, javascript. I'm also utilizing the google maps api.
The import and export statements are used frequently in web development, but they do not currently work automatically in a browser because they are newer features in the JavaScript language. You need to "build" the code into a format that the browser can execute. Example code on the web tends to assume that you are already doing this.
There are different tools that allow you to do this, such as Rollup or Webpack.
Heads up for anyone running into this issue like I was.
TLDR; make sure to run the import statement from GLOBAL SCOPE.
I ended up trying to insert my first import {test_exported_function} from "./test.js";
from inside of my main function which waits for the DOM content to load before running all of my scripts.
Didn't realize that I needed to execute that line from global scope of the script.
Once I realized that, it suddenly hit me how dumb I was for trying to import from a function scope.
(ﾉ≧ڡ≦) Teehee~!
Related
In render.js I have
import { Grid } from 'ag-grid-community';
import { tableMethods } from './table.js';
I created my own custom table methods and decided to try ag-grid since mine aren't as fast as theirs (no surprise). Unfortunately, while I could get my own methods loading from my js file by setting
<script type="module" src="render.js"></script>
I cannot get ag-grid to load, I get this error
Uncaught TypeError: Failed to resolve module specifier "ag-grid-community". Relative references must start with either "/", "./", or "../".
I used npm i ag-grid-community -D to install it. I wasn't sure if I needed the -D, so I tried without that and it still shows same error.
*Note - of course I've tried doing what the error message says. But it didn't resolve and the documentation doesn't mention anything about this.
I was able to get this working by adding following before my render.js file
<script src="ag-grid-community.js"></script>
I also disabled type=module once I realized this is probably the intended way to split up rendering scripts, or at least that was my guess.
I have to move my forgot password link, I used all steps for enabling javascript in my signin&signup custom policy like explained in this documentation.
My JS code is (it works in local html page not in azure) :
<script type="text/javascript" data-preload="true">
window.onload = function moveLinks() {
alert("Test!!");
/* Password Link*/
v_div = document.createElement("div");
v_div.setAttribute("id","divPass");
var passLink = document.getElementById("forgotPassword");
v_div.appendChild(passLink);
next.parentNode.insertBefore(v_div, next.nextSibling);
}
</script>
when I inspect the page I see my js code in the head, no error is detected, the alert does not appear and I do not understand where the error comes from!!
Can someone help please?
• The error is coming because your syntax is invalid because it seems you are trying to use an inline tag as a javascript element since it is throwing an unexpected token error but tags don’t work the same way they work in HTML as they still must follow javascript syntax, so they can’t contain arbitrary javascript code since you are modifying B2C page layout in custom policy code.
Thus, I would suggest you omit the tag and do the following. Below is just a sample reference: -
‘ import {javascript} from ‘<name of the referencing HTML file>’;
window.onload = function moveLinks() {
alert("Test!!");
/* Password Link*/
v_div = document.createElement("div");
v_div.setAttribute("id","divPass");
var passLink = document.getElementById("forgotPassword");
v_div.appendChild(passLink);
next.parentNode.insertBefore(v_div, next.nextSibling);
}
export passLink;
Hence, by using the ‘import’ parameter, the javascript code can be rectified successfully. Also, please refer to the links below for more clarity on the code modification and compilation: -
https://github.com/eslint/eslint/issues/10628
https://developer.salesforce.com/forums/?id=9062I000000IKXYQA4
Also, please refer to the link below for more details on customizing the B2C UI: -
https://moviesdiag132.blob.core.windows.net/b2c/global.css
Okay, let me preface this by saying I am a complete noob when it comes to Node.
I have a Node module, Typed.js, that I want to use on my site, but I'm not sure how. I don't think it'll work out the box since Node is a server-side tool, and you import stuff from the Typed.js package.
You need to wrapper your code up like this
(function(exports){
// your code goes here
})(typeof exports === 'undefined'? this['typed']={}: exports);
Then in your client side
<script src="typed.js"></script>
<script>
console.log(typed.your-function());
</script>
I'm a newbie with Polymer and Firebase, i am practicing with the two technologies. I am trying to implement firebase-auth for application authentication but i go a "Cannot read property 'signInWithPopup' of undefined" error.
i have this code :
<paper-toolbar>
<span class="title">Sample!</span>
<paper-icon-button
icon="[[statusIcon(signedIn)]]"
on-tap="processAuth">
</paper-icon-button>
</paper-toolbar>
<firebase-auth
id="auth"
app-name="emotions"
provider="google"
signed-in="{{signedIn}}"
user="{{user}}">
</firebase-auth>
and the script for processAuth
processAuth: function() {
this.$.auth.signInWithPopup();
}
and the following components were imported already:
<link rel="import" href="../../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-auth.html">
Did i missed something?
Sorry for this very noob question.
Make sure you have initialize firebase-app with the same app-name before you use firebase-auth
Try using document.getElementById('auth') instead of this.$.auth.
It seems for me, that this.$.auth is trying to find an #auth inside paper-icon-button, which is not there.
Check console.log(this) from processAuth to verify where this is pointing at.
In the tutorial for migrating a Google Chrome Extension to Manifest Version 2, I am directed to Remove inline event handlers (like onclick, etc) from the HTML code, move them into an external JS file and use addEventListener() instead.
OK, I currently have a background.html page that looks like this…
<html>
<script type="text/javascript">
// Lots of script code here, snipped
…
</script>
<body onload="checkInMyNPAPIPlugin('pluginId');">
<object type="application/x-mynpapiplugin" id="pluginId">
</body>
</html>
Following another directive, I've moved that Lots of script code into a separate .js file, and following this directive, I need to remove the onload= from the body tag, and instead cal addEventListener() in my script code. I've tried several approaches, but am apparently guessing wrong. What will that code look like? In particular, upon what object do I invoke addEventListener()?
Thanks!
I normally use this for body onload event...
document.addEventListener('DOMContentLoaded', function () {
// My code here.. ( Your code here )
});
For somethings it is working.. but really, I think we should use..
window.addEventListener('load', function () {
document.getElementById("#Our_DOM_Element").addEventListener('change - or - click..', function(){
// code..
});
});