Visual studio code live server for an html file with imported modules

JavaScript
1

Hi,

Can you work well with the live server in visual studio code when all you’re working with is an html file and a bunch of modules (so NO node.js project) ? ( I want to practice importing and exporting modules but I cannot do that locally)
(I have feeling that asking this question is answering it :smirk:, you can tell me)

I’m an atom girl but for the sake of this live server I’m using VSCode. I can turn on the live server all right but I get this annoying error message. (translated)
Loading of module from ‘http://127.0.0.1:5500/DWT/static/static/synapse/setup.js’ is blocked because of a MIME-type (‘text/html’) that is not allowed.

I can click on ‘more info’ and I’m brought to an article on MDN that tells me to set an http header correctly.

So, how do I set an http header on the live server in visual studio code? When I google it, I find a link but I’m not allowed in.
https://docs.microsoft.com/answers/questions/393771/refused-to-apply-style-from-lturlgt-because-its-mi.html

I says (translated) : The OCSP-answer does not contain a status for the certificate that has been verified.

I’ve turned on settings sync but that doesn’t make a difference, still access that microsoft site and I haven’t found an answer on stack overflow.

I’ve added type=text/css)to my css link, type=“application/javascript” to a script in the head and type=module to a script tag because I’d like to import and export modules, which is the reason I’m working with visual studio code.
I have added the live server extension but when I click on account and then on ‘manage trusted extensions’ it says ‘this account has not been used by any extensions’

I use ubuntu 2021 (a linux distribution that looks a lot like windows)
My default browser is firefox and I’m reading an FCC article on the live server as I’m writing this.

I’ve been using atom for years now. I like atom but I cannot create modules and test them without a server, so either I have to start a node.js project and go back to my beloved atom or I have to somehow deal with this (first?) problem.

I’m probably going to start up an electron project anyway but just in case this is only a small issue that is easily resolved? Anyone?

Thanks and greets
Karin

2

Does MDN Modules page help? I don’t think a live server is needed but maybe I’m misunderstanding.

3

Hi,

Sorry, did not read your reply correctly. This is my edited reply. I’ve tried it before, and it doesn’t work unless I start up a node.js project.
If simply open up the html file I get :

Access to script at 'file:///home/karin/Documenten/blabla.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.

I found this on Modules, introduction

Modules work only via HTTP(s), not locally
If you try to open a web-page locally, via file:// protocol, you’ll find that import/export directives don’t work. Use a local web-server, such as static-server or use the “live server” capability of your editor, such as VS Code Live Server Extension to test modules.

Nevertheless I’ll go through the modules article that you’ve linked for me. It’s probably the best thing to do. I’ve had some practice with modules in the past but that’s quite a while ago. Thanks for the article!

Greets,
Karin

4

Can you include a minimal example of what you’re doing? Is it just a script tag inside an html page? Can you show exactly how are you doing this?

6

Hi,

I had trouble reproducing the first EM but I’ve found it.
I have found out that importing one file works fine. I cannot import more than one file into the html file, that produces the mime-type message. When I import only one file and import the second file into the first file I import into the html file, I am get a cors message.

Cross-Origin-request blocked: the Same Origin Policy doesn’t allow reading the external source on file:///home/karin/Documenten/DWT/static/js/generic.js .

html
import file 1
import file 2
mime type error message

html
import file 1

file1.js
import file2
cors error message

It just won’t go away and I find it frustrating because I don’t know if this is a VSCode problem or a js problem. That’s why I like a simpler editor, I don’t drown in all the functionality. Here’s a version of what I’m doing:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>raphael.js</title>
  <meta charset="utf-8">
  <script src="../static/js_libraries/raphael-2.3.0/raphael.js" type="application/javascript"></script>
  <link rel="stylesheet" type="text/css" href="../static/raphStyles.css" >
</head>
<script type="module"  >
 // import { data } from '../static/js/setup.js
  // console.log(data)

  import { createGenericItem } from '../static/js/generic.js'
  createGenericItem()
</script>
 <body>
   <div id="Containers">
     <div id="svgContainer">
      flupke mijn flupke
     </div>
   </div>
 </body>
</html>

generic.js
Inside generic.js you’ll see ‘paper’. This is an object in raphael js, I included the library in a script tag in the head of the html file - maybe that is the problem?

import {data } from '../static/js/setup.js'

const paper = Raphael(data.svg, data.svgWidth, data.svgHeight);

function createGenericItem() {

  const { rectWidth, rectHeight, corner, colors} = data;
     
  const genericRect = paper.rect(100, 100, rectWidth, rectHeight, corner) ;
  genericRect.attr( { 'fill': colors.cyan, 'stroke': colors.jacarta, 'cursor' : 'move', 'stroke-width' : 2});

const genericText = paper.text(100 + rectWidth/2, 100 + rectHeight/2, "flupke") ;
  genericText.attr({'fill': colors.jacarta, 'cursor' : 'move'});
 
}
export { createGenericItem }

setup.js

const data = {
    corner : 4,
    rectWidth : 100,
    rectHeight : 40,
    svg : document.querySelector('#svgContainer'),
    colors : { 
        "pistachio" : '#9bc363',
        "cyan" : '#0c9191',
        "burly" : '#e3bc81',
        "ruby" : '#9b4065',
        "jacarta" : '#482b58',
        "lapis" : '#2a669d' 
    },
   data.svgWidth = data.svg.clientWidth;
   data.svgHeight = data.svg.clientHeight;

export {data}

Thank you,
Karin

7

I got it !

It was a very simple error I made in the relative path. All the js files live in the same folder !!! So I should import all js files like this : ‘./setup.js’ and not like this ’ …/static/blablaba.js’ .

So, I fear the power of VSCode all little less now which is worth all the embarassement.