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 有 class CrashCatch，它有构造函数所以不确定为什么 NextJS 以不同的方式对待它。

Answer 1

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

中所述

Node.js treats JavaScript code as CommonJS modules by default. Authors can tell Node.js to treat JavaScript code as ECMAScript modules via the .mjs file extension, the package.json "type" field, or the --input-type flag. See Modules: Packages for more details.

您可以尝试在 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 returns Loadable Component。我检查了动态导入仅适用于组件。为了在该包中使用 import stament，您仍然应该添加 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;
});

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

ReactJS Library being used in NextJS project says is not a constructor

javascript

reactjs

server-side-rendering

next.js