ReferenceError when importing mind-ar module in Nextjs App

[juanRabaa]

Im following the Three.js installation guide with npm, and importing mind-ar/dist/mindar-image-three.prod.js throws a ReferenceError

ReferenceError: require is not defined in ES module scope, you can use import instead This file is being treated as an ES module because it has a '.js' file extension and '[...]\node_modules\mind-ar\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

Call Stack
new MC
file:///C:/development/xampp7/htdocs/ar-marker-boilerplate/node_modules/mind-ar/dist/controller.03a2d8ae.js (3585:5)
<unknown>
file:///C:/development/xampp7/htdocs/ar-marker-boilerplate/node_modules/mind-ar/dist/controller.03a2d8ae.js (3603:73)
ModuleJob.run
node:internal/modules/esm/module_job (193:25)
async ESMLoader.import
node:internal/modules/esm/loader (530:24)
async importModuleDynamicallyWrapper
node:internal/vm/module (438:15)

[hiukim]

I have never tried importing in NextJS, but a react example (using npm install) is here: https://github.com/hiukim/mind-ar-js-react

[hiukim]

Closing it for now, please re-open if problem persists.

[juanRabaa]

It was a problem with how I was importing the library in next. Instead of doing a normal import, I had to disable server side rendering for the component that uses the library, which is activated by default.

Instead of

import ImageTrackingScene from 'COMPONENTS/ImageTrackingScene/ImageTrackingScene';

Do

import dynamic from 'next/dynamic';
const ImageTrackingScene = dynamic(() => import('COMPONENTS/ImageTrackingScene/ImageTrackingScene'), {
  ssr: false,
});