CODEWITHSUNDEEP
javascriptreactjsnext.jsserver-side-rendering
Boardy
Boardy

Reputation: 36237

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

I have built a ReactJS library and published it to NPM and works fine in a standard ReactJS project, but I now have a NextJS and I am trying to add it there, I expected it would just work as NextJS is a framework on top of ReactJS with some additional functionality.

In the app.js I have the following:

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 (
       ....
    ) 
}

When running this I get TypeError: CrashCatch is not a constructor

I have tried not using a dynamic import and doing a standard import as import {CrashCatch, CrashCatchProvider} from "crashcatchlib-reactjs"; but then I get the error SyntaxError: Cannot use import statement outside a module]

The source code for the reactjs library is open source so it's available on GitHub at https://github.com/Crash-Catch/CrashCatchLib-ReactJS. The index.js has the class CrashCatch which has the constructor so not sure why NextJS is treating it differently.

Upvotes: 3

Views: 3711

Answers (2)

Yilmaz
Yilmaz

Reputation: 49729

  • I never used crashcatchlib-reactjs library. I checked the docs could not understand how they import it. But to solve this error:

    SyntaxError: Cannot use import statement outside a module]

Install https://www.npmjs.com/package/next-transpile-modules. If you check the docs, in next.config.js

// next.config.js
const withTM = require('next-transpile-modules')(['crashcatchlib-reactjs']); 
module.exports = withTM({});
  • If it does not solve the issue, try dynamic import way, however, one think you should know dynamic import returns Loadable Component. I checked dynamic import works only for components. In order to use import stament with that package, you should still add configuration of next-transpile-modules. Then create a component:

import {CrashCatch } from "crashcatchlib-reactjs";

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

Then import this component dynamically:

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

  • In this case use vanilla js dynamic import. I am not sure If you have to add configuration of next-transpile-modules.

    let CrashCatchImport, CrashCatchProviderImport;

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

Upvotes: 1

diedu
diedu

Reputation: 20835

NextJS executes code on the server-side, so your library should also be compatible with Node. It seems import is not supported in CommonJS, which is the default module format used by Node. However, you can specify that your library should be treated as an ES Module to support import statements as described in the documentation 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.

You could try setting the type property to module in your package.json

Upvotes: 3

Related Questions