Failed to import into Next.js project

[vnobis-univ]

Look like this repo only has part of the project code, as build command is not working.

I have tried to import this package into React project, but it fails with next error:

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:94:18)
    at eval (webpack-internal:///socketmobile-capturejs:1:18)

[EricGlaenzer]

This is how we use it in a React app:

import {useEffect, useCallback } from 'react';
import {Capture, CaptureEventIds} from "socketmobile-capturejs";

But we will check and get back to you.

[mcsocket]

Hi @vnobis-univ, if this is still an issue, here is our react boilerplate that you might find helpful. Here is the link to the Github repo. It should show you how to use our CaptureJS in a react application. If the issue is resolved please let us know so we can close.

[vnobis-univ]

Hello @EricGlaenzer and @mcsocket,

Thank you for looking into the issue (sorry for lack of details).

There are actually 2 problems:

1. First one SyntaxError: Cannot use import statement outside a module is regarding "imports" usage is lib code.
   Next.js is using "require" in server side flow (in my case), so server side rendering was complaining on encountered "imports".
   Many libraries are provided as ES5 code (for compatibility purpose), but not socketmobile-capturejs.
   Maybe it can be considered as improvement for the future, but it hardly can be treated as a bug.
   Just to be clear this issue is present on SSR (server side rendering) phase.
   This issue can be fixed with next-transpile-modules module.
   Just use next code in next.config.js:

const withTM = require("next-transpile-modules")(["socketmobile-capturejs"]);
module.exports = withTM({
  webpack5: false, // not mandatory, but maybe you will need this "false" here
});

2. Second issue ReferenceError: XMLHttpRequest is not defined is also related to SSR.
   XMLHttpRequest doesn't exist for SSR (it is not a browser), but it is used in lib/httpTransport.js for creation of Ajax class.
   Here we are getting the error. It is not likely that socketmobile-capturejs will be used for anything on SSR phase, so I have came with 2 possible fixes (but both are quite bold):

// add to "server.js" or any other file used on server initialization

// option 1: just fix "is not defined" by providing dummy function (can be replaced with empty class)
global.XMLHttpRequest = function() {};

// option 2: use 'xhr2' package as replacement for XMLHttpRequest
global.XMLHttpRequest = require('xhr2');

Fixes for both issues are mentioned above (both applied to the Next.js app that is using socketmobile-capturejs).

It is possible to fix these issues on lib level.
Issue 1 can be fixed by transpiling ES6 to ES5.
Issue 2 can be fixed by rewriting creation of Ajax class inside lib/httpTransport.js (it will be an issue for every SSR lib/framework). Also I have failed to find any usage of Ajax class outside this file.

[vnobis-univ]

IMPORTANT UPDATE:
Solution for issue #2 above is working for NextJS app started in dev mode.
It is still crashing on next build command.
To fix it same approach can be used inside _app.js file (or any other starting point of React pages).
It will cover both dev mode case and build command case.

Sample for xhr2 lib:

// hack for "next build"
import xhr2 from "xhr2";

// if SSR is working now, replace XMLHttpRequest with lib
if (typeof globalThis.window?.document?.createElement === 'undefined') {
  globalThis.XMLHttpRequest = xhr2;
}

[mcsocket]

Hi @vnobis-univ, we have to discuss a few things before we make any changes yet but your solutions have given us valuable insight and we'll keep you posted on updates moving forward. Thanks so much!