编译报错：无法从非ECMAScript模块导入'memo'，求解决办法

针对你遇到的构建阶段报错：无法从非ECMAScript模块导入命名导出'memo'（仅默认导出可用），可以尝试以下几种解决方案：

1. 调整包版本 #

这个问题多由版本兼容性导致，尝试切换到经过验证的稳定版本：

# 降级到v4.6.0（该版本对ES模块处理更友好）
npm install @monaco-editor/react@4.6.0 --save
# 或者升级至最新稳定版
npm install @monaco-editor/react@latest --save

2. 修改构建工具配置 #

根据你使用的构建工具添加对应配置，强制正确解析该包的模块：

Vite配置 #

在vite.config.js中优化依赖解析：

export default {
  optimizeDeps: {
    include: ['@monaco-editor/react'],
    esbuildOptions: {
      target: 'es2020'
    }
  }
}

Webpack配置 #

在webpack.config.js中添加转译规则：

module.exports = {
  module: {
    rules: [
      {
        test: /@monaco-editor\/react/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }
      }
    ]
  }
}

3. 调整导入语法 #

放弃直接命名导入，改用默认导入后解构的方式：

// 替换原命名导入
// import { memo } from '@monaco-editor/react';

// 使用默认导入后解构
import MonacoEditor from '@monaco-editor/react';
const { memo } = MonacoEditor;

4. 清理重复依赖 #

检查是否存在多版本的@monaco-editor/react，并清理：

# 查看依赖树
npm ls @monaco-editor/react
# 去重依赖
npm dedupe

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