npm start运行报错：styled-components导入react-is的typeOf失败

报错原因 #

该报错是microbundle-crl@0.13.10内置的CommonJS模块转ES模块逻辑缺陷导致的：react-is包以CommonJS规范导出所有方法，而styled-components@5.3.3的ES模块版本以命名导入的方式引入typeOf方法，microbundle没有正确识别到这个导出映射，因此抛出导出不存在的错误。你之前尝试的删除依赖重装操作无法解决逻辑层面的转换问题。

修复方案 #

• 方案1：修改构建命令（最简单） #

  在原构建命令后添加--external react-is参数，让microbundle跳过对react-is的内部打包转换，直接使用项目中安装的react-is实例，避免导出识别错误。修改后的启动命令如下：

  microbundle-crl --no-compress --format modern,cjs --external react-is
  

  修改后重新执行npm start即可正常构建。

• 方案2：添加rollup导出配置（无依赖变更） #

  如果不想修改构建命令，可在项目根目录新建rollup.config.js文件，添加以下配置显式指定react-is的命名导出列表，让microbundle正确识别typeOf方法：

  import commonjs from '@rollup/plugin-commonjs';
  
  export default {
    plugins: [
      commonjs({
        namedExports: {
          'react-is': ['typeOf', 'isElement', 'isValidElementType']
        }
      })
    ]
  }
  

  配置完成后重新执行npm start即可。

• 方案3：降级styled-components版本（无配置变更） #

  如果你不想修改任何构建配置，直接把styled-components降级到5.2.3版本即可，该版本没有引入会触发此问题的react-is引用逻辑：

  npm i styled-components@5.2.3
  

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