React调用ndjson-stream-reader报Webpack Imported Module不是函数如何解决

该错误是Webpack打包阶段抛出的典型模块导入异常：你在usage.js中把ndjson-stream-reader.js的默认导出作为函数调用，但实际该文件的默认导出并非函数类型。

• 第一步：确认ndjson-stream-reader.js的导出规则
  打开文件检查导出语法，区分三种常见情况：
  • 命名导出：使用export function xxx()语法，没有export default语句
  • ES6默认导出：使用export default xxx语句
  • CommonJS导出：使用module.exports = xxx语法
• 第二步：核对usage.js的导入语法
  检查导入语句和导出规则是否匹配，同时确认导入的相对路径、文件名大小写完全正确（React在Linux/macOS环境下文件名大小写敏感）
• 第三步：打印导入结果验证
  在usage.js的导入语句后新增打印代码：

import ndjsonReader from './你写的导入路径/ndjson-stream-reader'
console.log(ndjsonReader) // 新增这行

触发逻辑后查看控制台输出：如果输出为对象、undefined，说明是导入导出不匹配；如果输出为函数，说明你调用时的语法有误（比如多写了一层括号）。

对应不同的导出规则，调整导入方式即可：

• 若ndjson-stream-reader.js为命名导出
  把默认导入改为命名导入即可：

  // 错误写法
  import ndjsonReader from './ndjson-stream-reader'
  // 正确写法
  import { 你要调用的函数名 } from './ndjson-stream-reader'
  

• 若ndjson-stream-reader.js为CommonJS导出
  两种修复方案二选一：
  1. 调用时加.default后缀：

  import ndjsonReader from './ndjson-stream-reader'
  // 调用时写
  ndjsonReader.default(你的参数)
  

  2. 在项目的jsconfig.json/tsconfig.json中开启兼容配置：

  {
    "compilerOptions": {
      "esModuleInterop": true
    }
  }
  

• 若路径/文件名写错
  修正导入的相对路径和文件名，确保和实际文件存放位置、命名完全一致。

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