Cannot use import statement outside a module?

Cannot use import statement outside a module? - javascript

I am just trying to have fun with JS, I am creating a small project trying to implement a new architecture that I di not use before, I was always using js in React apps, or using native JS but not creating an app with it, I was using it to create some animations and handle some changes in my pages, nothing complex).
I want to learn how to create a JS app, implementing a MVC architecture ! I am not following any tutorial, so here is my folder structure :
Here is my index.html :
<html>
<head>
<title>Test js PROJECT</title>
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>
And that's my app.js :
import { loadApp } from './MVC/controllers/loadApp';
loadApp();
And that's is my loadApp.js :
const loadApp = () => {
const showUsersOption = document.createElement('button');
const showProductsOption = document.createElement('button');
showUsersOption.createTextNode('Users');
showProductsOption.createTextNode('Products');
const app = document.getElementById('root');
app.appendChild(showUsersOption);
app.appendChild(showProductsOption);
}
export default loadApp;
So I think what I am trying to do is simple, adding two buttons to the root element, But I got this :
app.js:1 Uncaught SyntaxError: Cannot use import statement outside a
module
Based on this comment to the question, I added type module in my script like that :
<html>
<head>
<title>Test js PROJECT</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="app.js"></script>
</body>
</html>
But I got this :
Access to script at
'file:///C:/Users/Taoufiq.BENALLAH/Desktop/Master/js/app.js' from
origin 'null' has been blocked by CORS policy: Cross origin requests
are only supported for protocol schemes: http, data, chrome,
chrome-extension, chrome-untrusted, https.
GET file:///C:/Users/Taoufiq.BENALLAH/Desktop/Master/js/app.js
net::ERR_FAILED
Based on the comments in this question here, I have to restart my editor or run npm install, but I am not using node modules or anything, my app is simpler than that.
Any idea ? Any help would be much appreciated.

Related

How to import a blazor custom element in another JS application?

I have a blazor server app, with a registered custom element as below code:
builder.Services.AddServerSideBlazor(options =>
{
options.RootComponents.RegisterAsCustomElement<Counter>("my-blazor-counter");
});
I want to import this blazor custom element in another node.js application to convert it into a lit element(web component).
I have added below scripts in my node.js app
<script src="https://localhost:7075/_framework/blazor.server.js"></script>
<script src="https://localhost:7075/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
but while initializing the Blazor it still using node app port and failing while initialization.
I am not sure I am missing anything here or if there is any other way to do it.

The following describes how I resolved an issue similar to yours: trying to register a custom element, the client not rendering the component and no error message anywhere.
I followed the instructions but the there was nothing happening client-side. After inspecting the websocket's traffic using Firefox I ran into the following message from the client to the server (slightly edited for readability):
ùÀµEndInvokeJSFromDotNetÂÚÙ[
2,
false,
"Could not find 'registerBlazorCustomElement' ('registerBlazorCustomElement' was undefined).
findFunction/<#https://localhost:5001/_framework/blazor.server.js:1:497
findFunction#https://localhost:5001/_framework/blazor.server.js:1:465
E#https://localhost:5001/_framework/blazor.server.js:1:2606
attachWebRendererInterop/<#https://localhost:5001/_framework/blazor.server.js:1:33097
attachWebRendererInterop#https://localhost:5001/_framework/blazor.server.js:1:33145
beginInvokeJSFromDotNet/s<#https://localhost:5001/_framework/blazor.server.js:1:3501
beginInvokeJSFromDotNet#https://localhost:5001/_framework/blazor.server.js:1:3475
_invokeClientMethod/<#https://localhost:5001/_framework/blazor.server.js:1:71894
_invokeClientMethod#https://localhost:5001/_framework/blazor.server.js:1:71880
_processIncomingData#https://localhost:5001/_framework/blazor.server.js:1:69922
kt/this.connection.onreceive#https://localhost:5001/_framework/blazor.server.js:1:64322
connect/</o.onmessage#https://localhost:5001/_framework/blazor.server.js:1:48638
EventHandlerNonNull*connect/<#https://localhost:5001/_framework/blazor.server.js:1:48489
connect#https://localhost:5001/_framework/blazor.server.js:1:48005
_startTransport#https://localhost:5001/_framework/blazor.server.js:1:57626
_createTransport#https://localhost:5001/_framework/blazor.server.js:1:56195
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:54044
async*start#https://localhost:5001/_framework/blazor.server.js:1:51309
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:66198
_startWithStateTransitions#https://localhost:5001/_framework/blazor.server.js:1:65598
start#https://localhost:5001/_framework/blazor.server.js:1:65262
Gn#https://localhost:5001/_framework/blazor.server.js:1:129904
Yn#https://localhost:5001/_framework/blazor.server.js:1:127771
async*#https://localhost:5001/_framework/blazor.server.js:1:131523
#https://localhost:5001/_framework/blazor.server.js:1:131529
"
]
In my case it was that I hadn't added <script src="/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script> to the html.

I was struggling to get this working for a Blazor serverside app. I created a test.html page in the wwwroot of the blazor project.
The fix for me was to specify the base url.
My html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- my component is here -->
<blazor-counter></blazor-counter>
<base href="http://localhost:5144">
</head>
<body>
<script src="_framework/blazor.server.js"></script>
</body>
</html>

How to fetch HTML and CSS files for web components when hosted on a different domain than the application itself?

I am looking for a clean solution to split web components into JS, HTML and CSS files and host them on a CDN. I try to avoid the webpack html and css-loader as they dont allow me to export my web component as a plain ES module.
The goal is to use a web component from any frontend app just by importing it from a spcified URL. Thereby seperation of concerns should be preserved. Individual files for style, markup and logic also allow for syntax highlighting.
In a local dev environment I found the following to work great:
WebComponent.js:
export default class WebComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
const style = new CSSStyleSheet();
const template = document.createElement("template");
fetch("./WebComponent.css").then((res) =>
res.text().then((css) => {
style.replaceSync(css);
this.shadowRoot.adoptedStyleSheets = [style];
})
);
fetch("./WebComponent.html").then((res) =>
res.text().then((html) => {
template.innerHTML = html;
this.shadowRoot.appendChild(template.content.cloneNode(true));
})
);
}
}
WebComponent.css:
button {
/* Some styling */
}
WebComponent.html:
<button>Custom buttom</button>
I can import the component by using browser native ES module imports:
index.html:
<!DOCTYPE html>
<html>
<body>
<web-component></web-component>
<script type="module">
import WebComponent from "./WebComponent";
customElements.define("web-component", WebComponent);
</script>
</body>
</html>
This works until I move the web component files to a different location (a google cloud storage bucket) than my index.html and import WebComponent.js from there.
<!DOCTYPE html>
<html>
<body>
<web-component></web-component>
<script type="module">
import WebComponent from "https://storage.googleapis.com/storage-bucket/WebComponent.js";
customElements.define("web-component", WebComponent);
</script>
</body>
</html>
WebComponent.js gets imported correctly but it then tries to fetch WebComponent.css and WebComponent.html from a URL relative to localhost where index.html is served. However it should fetch from a URL relative to where it is hosted (https://storage.googleapis.com/storage-bucket/).
Any ideas how something like that can be achieved? Without hard coding the url into both fetch calls. That's not an option as the url can change automatically from time to time.

You are having issue with linking resources in the JS web page for which :
local component is working
import WebComponent from "./WebComponent";
remote component is failing
import WebComponent from "URL";
It might be that for this to work you should try this :
<script type="module" src="https://storage.googleapis.com/storage-bucket/WebComponent.js">
customElements.define("web-component", WebComponent);
</script>
References :
https://cloud.google.com/storage/docs/hosting-static-website
https://www.npmjs.com/package/webcomponent?activeTab=readme
https://lit-element.polymer-project.org/guide/use

JavaScript file paths are relative to the displayed page. So the behavior you are observing is expected.
You can use a JavaScript variable with a simple js declaration like below and use this variable across whenever you assign URLs dynamically:
<script type="text/javascript">
var webComponentPath = 'https://storage.googleapis.com/storage-bucket/';
</script>

PWA Simple Demo - Error when add pwabuilder-sw-register.js

Hello,
I'm trying to create a simple PWA demo by following the steps of this article: "https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/get-started"
However when I reach the step to download and add the files: "pwabuilder-sw.js" and "pwabuilder-sw-register.js" to root and then add <script src="/pwabuilder-sw-register.js"></script> to the head of index.html I got error on Edge browser: "SCRIPT1086: SCRIPT1086: Module import or export statement unexpected here" I search around and I find that I have to add type="module" like this <script src="/pwabuilder-sw-register.js" type="module"></script> but now I'm getting another error: "0: Unable to get property 'define' of undefined or null reference" in
pwaupdate (175,5829)
My page code looks like:
Index.html
<html>
<head>
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="manifest" href="/manifest.json">
<script src="/pwabuilder-sw-register.js" type="module"></script>
</head>
<body>
<h1>Express 2</h1>
<p>Welcome to Express</p>
</body>
</html>
pwabuilder-sw.js
// This is the service worker with the Cache-first network
const CACHE = "pwabuilder-precache";
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SKIP_WAITING") {
self.skipWaiting();
}
});
workbox.routing.registerRoute(
new RegExp('/*'),
new workbox.strategies.CacheFirst({
cacheName: CACHE
})
);
pwabuilder-sw-register.js
// This is the service worker with the Cache-first network
// Add this below content to your HTML page inside a <script type="module"></script> tag, or add the js file to your page at the very top to register service worker
import 'https://cdn.jsdelivr.net/npm/#pwabuilder/pwaupdate';
const el = document.createElement('pwa-update');
document.body.appendChild(el);
I searched a lot but I did not find any clue.
Please advise.

There are only 2 things you need to make this work:
Add pwabuilder-sw.js and pwabuilder-sw-register.js to your site root.
Add the following script tag to your <head>
<script type="module" src="pwabuilder-sw-register.js"></script>
Here's a quick sample that shows this working.
It looks like the MSDN article missed the "module" script type. My fault! I've updated the MSDN article to include this fix.

You normally don't need any more this script reference <script src="/pwabuilder-sw-register.js" type="module"></script>
The script will be loaded by the pwaupdate component. So simply add this code inside a block at the end of your HTML page:
import 'https://cdn.jsdelivr.net/npm/#pwabuilder/pwaupdate';
const el = document.createElement('pwa-update');
document.body.appendChild(el);
If it still doesn't work, please open an issue on our Github repo or ask to Justin who's in charge of this part on Twitter: https://twitter.com/Justinwillis96
Thanks!
David

How to add the GoogleChromeLabs input-first-delay polyfill to a React app

I must be missing something simple, but can't seem to get the polyfill working for measuring the first input delay on my firebase project.
I have included the minified file as suggested here, and then in the body of my HTML I have run the code as suggested also.
So it looks like:
<head>
<title>My website</title>
<!--first-input-delay-->
!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);
</head>
<body>
<!-- my react app -->
<div id="root"></div>
<script>
perfMetrics.onFirstInputDelay((delay, evt) => {
console.log("First Input Delay", delay)
console.log("Event details", evt)
})
</script>
</body>
When I include the console logs, the script runs as expected and console logs the data, but it never sends it to firebase. If I take out the console logs (perfMetrics.onFirstInputDelay()), the script fails with TypeError: n is not a function.
How should I be adding this to my app? Should I be sending the trace to Firebase somehow? I use performance tracing at the moment, but unsure how to send this specific event as it doesn't have a start and stop time.
Is the solution something like the below?
const performance = firebase.performance()
performance.trace(onFirstInputDelay)

So I was doing something silly. I only needed to include the polyfill and let the Firebase SDK handle the onFirstInputDelay event.
So just having this works.
<head>
<title>My website</title>
<!--first-input-delay-->
!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);
</head>
<body>
<!-- my react app -->
<div id="root"></div>
</body>

Blank page with simplest possible pyjs (pyjamas) app

I'm trying to use pyjamas (http://pyjs.org/). My input file, named hi.py, looks like this:
from pyjamas import Window
from pyjamas.ui import RootPanel, Button
from pyjamas.ui import HTML
def greet(sender):
Window.alert("Hello!")
b = Button("Click me", greet)
RootPanel().add(b)
I run the following command:
python ~/pyjs-pyjs-07f54ad/bin/pyjsbuild hi.py
Building : hi
PYJSPATH : [
/Users/michaelnatkin/HelloPyjs
/Users/michaelnatkin/pyjs-pyjs-07f54ad/library
/Users/michaelnatkin/pyjs-pyjs-07f54ad/addons
]
Built to : /Users/michaelnatkin/HelloPyjs/output
Which appears to run without errors, and here is my resulting directory:
Michael-Natkins-MacBook-Pro-2:HelloPyjs michaelnatkin$ ls .
hi.js hi.py output
Michael-Natkins-MacBook-Pro-2:HelloPyjs michaelnatkin$ ls output
__init__.py gchart.gif hi.safari.cache.html
_pyjs.js hi.html history.html
bootstrap.js hi.ie6.cache.html tree_closed.gif
bootstrap_progress.js hi.mozilla.cache.html tree_open.gif
disclosurePanelClosed.png hi.nocache.html tree_white.gif
disclosurePanelClosed_rtl.png hi.oldmoz.cache.html
disclosurePanelOpen.png hi.opera.cache.html
I then direct my browser to one of the html files: file:///Users/michaelnatkin/HelloPyjs/output/hi.html
and I get... a blank page. The only error in my js console is:
Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
which I guess isn't too surprising since the html file says:
<html>
<!-- auto-generated html - You should consider editing and adapting this
to suit your requirements. No doctype used here to force quirks mode; see
wiki for details: http://pyjs.org/wiki/csshellandhowtodealwithit/
-->
<head>
<title>hi (Pyjamas Auto-Generated HTML file)</title>
<meta name="pygwt:module" content="hi">
</head>
<body style="background-color:white">
<script type="text/javascript" src="bootstrap.js"></script>
<iframe id="__pygwt_historyFrame" style="display:none;"></iframe>
<script type="text/javascript" src="bootstrap.js"></script>
<iframe id="__pygwt_historyFrame" style="display:none;"></iframe>
</body>
</html>
So.. I'm completely stuck. Can someone tell me how to get this bad boy to produce output? I've got a much more complicated app I want to create, but if I can't say "Hello" it isn't going to go well. Thank you!

Have you tried it in Firefox too? While nothing is displayed with Chrome, with Firefox I get an error message which comes from the way you import RootPanel and Button. You should replace your single line by:
from pyjamas.ui.RootPanel import RootPanel
from pyjamas.ui.Button import Button
After that your button greets me properly.
And regarding the Chrome issue, either launch it with --allow-file-access-from-files or run a local web server to display your page. More details there: https://github.com/pyjs/pyjs/wiki/googlechromeproblems

Develop Reference

JavaScript is the programming language of the Web.

Cannot use import statement outside a module? - javascript

Related

How to import a blazor custom element in another JS application?

How to fetch HTML and CSS files for web components when hosted on a different domain than the application itself?

PWA Simple Demo - Error when add pwabuilder-sw-register.js

How to add the GoogleChromeLabs input-first-delay polyfill to a React app

Blank page with simplest possible pyjs (pyjamas) app

Categories

Resources