Quasar CLI搭配Webpack v4出现ESM URL Scheme错误求指导

这个错误源于Node.js v20的ESM加载器严格要求绝对路径必须是file://协议格式，而Webpack v4在Windows环境下处理路径时，可能直接输出了盘符开头的路径（如C:\xxx），导致ESM加载器无法识别。以下是具体的解决方案：

1. 修正Webpack配置中的路径处理 #

在quasar.conf.js的Webpack配置部分，确保所有绝对路径通过Node.js的url模块转换为合法的file:// URL，或者使用Webpack的path模块规范化路径：

const { pathToFileURL } = require('url');
const path = require('path');

module.exports = function (ctx) {
  return {
    build: {
      chainWebpack: (config) => {
        // 规范化项目根路径
        const rootPath = path.resolve(__dirname);
        // 针对模块解析添加路径处理逻辑
        config.resolve.plugins.append('PathFixer', {
          resolvePath: (source) => {
            if (source.startsWith(rootPath)) {
              return pathToFileURL(source).href;
            }
            return source;
          }
        });
      }
    }
  };
};

2. 调整项目模块类型 #

检查项目根目录的package.json，如果存在"type": "module"字段，将其改为"commonjs"：

{
  "type": "commonjs"
}

Webpack v4对ESM的支持不如v5完善，切换为CommonJS模块规范可以避免ESM加载器的路径校验问题。

3. 处理第三方依赖的路径问题 #

部分第三方依赖可能在ESM模式下生成了不符合要求的路径，可以在Webpack配置中将这些依赖强制转为CommonJS处理：

module.exports = function (ctx) {
  return {
    build: {
      chainWebpack: (config) => {
        config.module.rule('js')
          .include.add(/node_modules\/有问题的依赖名/)
          .end()
          .type('commonjs');
      }
    }
  };
};

4. 临时调整Node.js启动参数 #

如果上述方案无效，可以尝试添加Node.js实验性参数来放宽ESM路径校验（不推荐长期使用）：

NODE_OPTIONS="--experimental-specifier-resolution=node" quasar dev

5. 降级Node.js版本 #

Webpack v4发布时Node.js v20尚未推出，存在兼容性问题。可以临时降级Node.js到v16或v18 LTS版本，验证是否解决问题。

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