microbundle基础实现运行报错：无法解析导入的模块该如何解决？

排查解决步骤 #

• 先确认依赖安装状态：在webpack-loads-microbundle目录下执行pnpm install，安装完成后进入该目录的node_modules/@mymicrobundle/example路径，检查该目录是否存在，且包含完整的package.json和打包后的dist目录。
• 核对被依赖包的名称配置：打开mymicrobundle目录下的package.json，确认其name字段取值和你依赖中写的@mymicrobundle/example完全一致，名称不匹配会直接导致模块无法识别。
• 确认microbundle已生成打包产物：进入mymicrobundle目录，检查是否存在dist文件夹，且文件夹内有你配置的index.umd.js、index.module.js等输出文件。如果还未执行打包，先运行microbundle build生成产物后，再重新安装一次依赖。
• 检查webpack后缀解析配置：打开webpack配置文件，确认resolve.extensions中包含.js后缀，如果你只配置了.ts、.tsx后缀，webpack会忽略js格式的产物文件，补充配置即可：

// webpack.config.js 示例配置
module.exports = {
  // 其他配置项
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  }
}

• 修复pnpm本地软链接异常：如果之前的安装有缓存，可先删除依赖重装：在webpack-loads-microbundle目录下依次执行pnpm remove @mymicrobundle/example、pnpm add file:../mymicrobundle，确保软链接指向正确的本地包路径。
• 修正package.json的exports字段配置：如果你的webpack版本为5+，会优先读取package.json的exports字段，可将该字段调整为更通用的配置，避免解析逻辑不兼容：

{
  ...
  "exports": {
    ".": {
      "import": "./dist/index.module.js",
      "require": "./dist/index.umd.js"
    }
  }
}

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