Node.js前端项目导入axios报模块标识符解析错误怎么解决？

报错根因 #

浏览器原生ES Module不支持裸模块名导入，要求所有模块路径必须以./、../、/开头，或提前配置Import Map映射。
你已安装的axios存放在node_modules目录中，express仅暴露了public目录为静态资源，浏览器无法直接访问node_modules下的文件，因此无法解析axios标识符。

解决方案 #

方案一：直接使用CDN全局axios（成本最低） #

你已经在base.pug中引入了axios CDN，此时axios会自动挂载到window全局对象，不需要写任何import语句，直接在public/js/index.js中调用axios即可。
如果编辑器提示变量未定义，可以在index.js顶部加一行声明：

const axios = window.axios;

方案二：配置Import Map保留原有导入写法 #

如果要保留import axios from "axios"的写法，可通过浏览器原生Import Map功能做模块映射，在base.pug的<head>中添加如下代码，位置要放在所有type="module"的script标签之前：

<script type="importmap">
{
  "imports": {
    "axios": "https://unpkg.com/axios@latest/dist/esm/axios.min.js"
  }
}
</script>

配置完成后原有导入代码无需修改即可正常运行。

方案三：使用本地安装的axios #

如果要使用本地node_modules里的axios包，需先调整静态资源配置：

1. 在app.js中新增静态资源路由，暴露axios的ESM文件：

// 原有public静态资源配置保留，新增以下代码
app.use('/axios', express.static(path.join(__dirname, "node_modules/axios/dist/esm")));

2. 修改导入语句为路径形式：

import axios from "/axios/axios.min.js";

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