EJS文件无法执行含import语句的JavaScript模块脚本求助

本地运行EJS项目时，尝试通过type="module"的script标签调用其他JS文件的函数，但只要JS文件包含import语句，代码就完全无法执行，连最基础的console.log都没有输出。相关代码文件如下：

1. app.js #

// Requirements
const express = require("express");
const cors = require("cors");
const path = require("path");
const dotenv = require("dotenv");
dotenv.config({ path: `.env.development` });


require("./src/dataBase/dbConfig.js")

const corsOptions = { origin: process.env.ALLOW_ORIGIN };

const app = express();
app.use(cors(corsOptions));

//template engine
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "src/views"));

// response handler middleware
app.use(require("./src/utils/response"));

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, "src/views")));


app.use(require('./src/routes'));

app.get("/", (req, res) => {
  res.render("index");
});

if (process.env.NODE_ENV !== "developing") {
  app.listen(process.env.PORT, () => {
    console.log(`🟢 | Server running | http://localhost:${process.env.PORT}/`);
  });
} else {
  module.exports = app;
}

2. index.ejs（路径：src/views） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="module" src="./src//js/handers/fileHandler/loadFiles//loadJs.js"defer></script>
    <script type="module" src="./src//js/handers/fileHandler/loadFIles/loadCss.js"defer></script>
    <script type="module" src="./src//js/handers/fileHandler/fileHandler.js"defer></script>
    <script type="module" src="./src/js/index.js" defer></script>

</head>
<body>
   <div class="app"></div>
</body>
</html>

3. index.js（路径：src/views/src/js） #

console.log("test")

import { loadFiles } from "./handlers/filehandler/fileHandler.js";

loadFiles()

1. 修正路径拼写与格式错误 #

EJS中的script标签存在多处路径问题：

• 多余斜杠：./src//js 改为 ./src/js
• 拼写错误：handers → handlers；loadFIles → loadFiles
• 格式问题：defer前需添加空格（如defer>改为 defer>）

修正后的script标签：

<script type="module" src="./src/js/handlers/fileHandler/loadFiles/loadJs.js" defer></script>
<script type="module" src="./src/js/handlers/fileHandler/loadFiles/loadCss.js" defer></script>
<script type="module" src="./src/js/handlers/fileHandler/fileHandler.js" defer></script>
<script type="module" src="./src/js/index.js" defer></script>

2. 统一模块导入路径的大小写 #

index.js中导入路径的filehandler需与实际目录名（fileHandler）大小写一致，修正后：

console.log("test")

import { loadFiles } from "./handlers/fileHandler/fileHandler.js";

loadFiles()

3. 确保模块正确导出 #

确认fileHandler.js中已正确导出loadFiles函数：

// 示例导出代码
export function loadFiles() {
  // 你的函数逻辑
}

4. 验证静态文件服务配置 #

app.js中已将src/views设为静态目录，当前JS文件路径（src/views/src/js）符合要求，服务器可正常访问这些文件。

5. 查看浏览器控制台定位问题 #

打开浏览器开发者工具（F12）的Console面板，检查是否存在404文件未找到、模块语法错误等提示，这是快速定位问题的核心方法。

内容的提问来源于stack exchange，提问作者Simi