JS 模块/导入节点和 ejs 的错误

Question

I'm having problem linking/importing my javascript files in my node-project. I'm trying to link to a public javascript map from my ejs- file. In my project so far, I have made due by writing my javascript within the code in the ejs/html- script tags, but it doesn't seem to be able to import. Since I would like to import from different .js-files, I find myself struggling.

This is from app.js:

const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.use(express.static('public'));```

this is from my taskboard.ejs:

<script src="/public/javascript/loggedinFunctions/taskboard/api/kanbanAPI.js" type="module">
  </script>
  <script>
  import KanbanAPI from "/public/javascript/api/kanbanAPI.js"
  console.log(KanbanAPI.getItems(1));
</script>

Here is my file structure: enter image description here

I have double-checked that the linking (ie /public/javascript..) works in Visual Studio Code by click+c (to open it), so it's not an issue of (../) or (./).

The errors I get on the browser (Firefox):

GEThttp://localhost:3000/public/javascript/loggedinFunctions/taskboard/api/kanbanAPI.js
[HTTP/1.1 404 Not Found 3ms]

Loading module from “http://localhost:3000/public/javascript/loggedinFunctions/taskboard/api/kanbanAPI.js” was blocked because of a disallowed MIME type (“text/html”).

Uncaught SyntaxError: import declarations may only appear at top level of a module

When I skip the type="module" in the script tag, I cannot link it either in the browser. In both cases, it throws the 404 Not Found. I have read about type="module" as a way to circumvent the browser misreading the type of the document, but it doesn't seem to work in either case. If I add (../) to the src like so:

<script src="../public/javascript/loggedinFunctions/taskboard/api/kanbanAPI.js">

it is not found either, which makes me believe that there is maybe something wrong with the routing(?) Here is my map structure for the moment: enter image description here

I also have this in app.js:

app.use((req, res, next) => {
  res.locals.path = req.path;
  next();
});

And this is the top code in kanbanAPI.js:

export default class KanbanAPI {
  static getItems(columnId){
    const kanbanColumn = read().find(column => column.id == columnId);
    if (!column){
      return [];
    }
  }
}

Answer 1

when you use a folder name as static , it's implied that it will look inside that folder, meaning that you don't need to write public when looking for a file, but just the path inside the folder

<script type="module">
 import KanbanAPI from "/javascript/api/kanbanAPI.js"
</script>