NextJS 项目中使用的 ReactJS 库说不是构造函数

Question

我已经构建了一个 ReactJS 库并将其发布到 NPM 并且在标准 ReactJS 项目中运行良好，但是我现在有一个 NextJS 并且我正在尝试将它添加到那里，我希望它可以正常工作，因为 NextJS 是一个带有一些附加功能的 ReactJS 顶部。

在 app.js 我有以下内容：

import dynamic from 'next/dynamic'
import {useEffect} from "react";

function MyApp({ Component, pageProps }) {

    const {CrashCatch, CrashCatchProvider} = dynamic(import('crashcatchlib-reactjs'), { ssr: false })

    let crash_catch = new CrashCatch();

    crash_catch.initialiseCrashCatch("12978650", "d7kqcewvshoyxbp564f8tm0zl", "1.0.1");

    return (
       ....
    ) 
}

运行时我得到TypeError: CrashCatch is not a constructor

我尝试不使用动态导入并以import {CrashCatch, CrashCatchProvider} from "crashcatchlib-reactjs"; 进行标准导入，但随后出现错误SyntaxError: Cannot use import statement outside a module]

reactjs 库的源代码是开源的，因此可以在 GitHub 上的 https://github.com/Crash-Catch/CrashCatchLib-ReactJS 上找到它。 index.js 有 CrashCatch 类，它有构造函数，所以不知道为什么 NextJS 会以不同的方式对待它。

Answer 1

NextJS 在服务器端执行代码，因此您的库也应该与 Node.js 兼容。 CommonJS 似乎不支持导入，这是 Node 使用的默认模块格式。但是，您可以指定应将您的库视为 ES 模块以支持 import 语句，如文档https://nodejs.org/api/esm.html#enabling中所述

Node.js 默认将 JavaScript 代码视为 CommonJS 模块。作者可以通过 .mjs 文件扩展名、package.json“type”字段或 --input-type 标志告诉 Node.js 将 JavaScript 代码视为 ECMAScript 模块。有关详细信息，请参阅模块：包。

您可以尝试在 package.json 中将 type 属性设置为 module

Answer 2

• 我从未使用过crashcatchlib-reactjs 库。我检查了文档无法理解他们如何导入它。但是要解决这个错误：

  SyntaxError: Cannot use import statement outside a module]
  

安装https://www.npmjs.com/package/next-transpile-modules。如果您查看文档，请在next.config.js

// next.config.js
const withTM = require('next-transpile-modules')(['crashcatchlib-reactjs']); 
module.exports = withTM({});

• 如果不能解决问题，试试动态导入的方式，不过，你应该知道dynamic import返回可加载组件。我检查了动态导入仅适用于组件。为了在该包中使用import 语句，您仍应添加next-transpile-modules 的配置。然后创建一个组件：

从“crashcatchlib-reactjs”导入 {CrashCatch }；

export default function ClientSideComponent(props){
    // Write here the logic.
 
    return <>yourJsxLogicComponent</>;
}

然后动态导入这个组件：

const ClientSideComponent = dynamic(()=> import("./ClientSideComponent.js"), { ssr: false });

• 在这种情况下，使用 vanilla js 动态导入。我不确定是否必须添加next-transpile-modules的配置。

  let CrashCatchImport, CrashCatchProviderImport;
  
  import("crashcatchlib-reactjs").then((CrashCatch, CrashCatchProvider) => 
  {
    CrashCatchImport = CrashCatch.default;
    CrashCatchProviderImport=CrashCatchProvider.default;
  });