webpack构建报错,Can‘t import the named export ‘SetArray‘ from non EcmaScript module

之前运行得好好的项目,在删除node_modules目录后,重新npm i,突然启动不起来了,提示Can't import the named export 'SetArray' from non EcmaScript module。

经过了解和排查,发现可能是因为某个依赖项升级后导致与其他依赖版本不匹配,解决方案如下:

在webpack.config.js里添加一段代码:

module: {
   rules: [
      {
        include: /node_modules/,
        test: /\.mjs$/,
        type: 'javascript/auto'
      }
   ]
}    

然后正常npm start启动了。

感觉应该是某个依赖项升级后多了个mjs类型的文件,然后webpack没有相应的构建打包规则,需要配置转化一下。

知识点总结:

(1)关于webpack,javascript/auto去官网了解了一下,给的定义是这样的:

 意思就是采用自己定义的加载器进行解析,而不是用webpack默认的。

(2)通过这次问题,感觉还是需要一个package-lock.json或者npm-shrinkwrap.json用来限制版本,否则很容易出现npm/cnpm下载的时候某个依赖项自动更新版本导致版本不匹配。这边提供生成npm-shrinkwrap.json方式:

npm shrinkwrap

【注意】如果package-lock.json或者npm-shrinkwrap.json同时存在,那么优先更新匹配npm-shrinkwrap.json。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当在编译 `apisix-dashboard` 时出现 `Can't import the named export 'memo' from non EcmaScript module (only default export is available)` 的错误,这个问题通常是由于 `@monaco-editor/react` 的版本不兼容引起的。这个错误提示表明 `@monaco-editor/react` 的导出模块不是标准的 ECMAScript 模块。 为了解决这个问题,你可以尝试以下方法: 1. 确保你的 `apisix-dashboard` 使用的是兼容的 `@monaco-editor/react` 版本。可以尝试升级或降级 `@monaco-editor/react` 到与 `apisix-dashboard` 兼容的版本。你可以查阅 `apisix-dashboard` 的文档或 GitHub 页面来获取关于兼容版本的信息。 2. 在项目的配置文件中,尝试启用对 ECMAScript 模块的支持。具体的配置方式取决于你所使用的构建工具(如 webpack、Babel 等)。在 webpack 的配置文件中,你可以尝试添加以下配置: ```javascript module: { rules: [ { test: /\.mjs$/, include: /node_modules/, type: "javascript/auto", }, ], }, ``` 这个配置将会告诉 webpack 将非 ECMAScript 模块视为自动类型(`javascript/auto`),从而解决导入错误。 3. 如果以上方法仍然无效,可以尝试使用其他版本的 `@monaco-editor/react` 或寻求 `apisix-dashboard` 社区或文档的支持,了解其他用户是否遇到类似的问题,并且是否有解决方案可用。 如果问题仍然存在,请提供更多的错误信息、上下文和相关代码,以便更准确地帮助你解决该问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值