Error on the Server Side

[rajibulanam]

Hi,
I am using these codes with the package

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "aframe": "^1.4.1",
    "mind-ar": "^1.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^3.1.0"
  }

The server side debug is

A-Frame Version: 1.4.1 (Date 2023-01-04, Commit #5183a179)
index.js:96 THREE Version (https://github.com/supermedium/three.js): ^0.147.1
index.js:98 WebVR Polyfill Version: ^0.10.12
mindar-image.prod.js:9 Uncaught ReferenceError: require is not defined
    at mindar-image.prod.js:9:7
    at index.js:17:1
    at index.js:17:1
(anonymous) @ mindar-image.prod.js:9
(anonymous) @ index.js:17
(anonymous) @ index.js:17
DevTools failed to load source map: Could not load content for chrome-extension://pgjjikdiikihdfpoppgaidccahalehjh/webspeed.js.map: Fetch through target failed: Frame not found; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Please guide me how to solve this issue.

[jotatoledo]

@hiukim I guess this is realted to the new build system used since 1.2.0?
After updating to 1.2.0 Im seeing the same issue when deploying a react app created with cra - seems like a lot of require() instructions are spreaded in the bundle, which wont break the app during development.

[chirag-aura]

@jotatoledo @rajibulanam have you Solved This?

[jotatoledo]

See hiukim/mind-ar-js#343

[hiukim]

I found that this issue existed only when we tried to import the aframe version,

i.e.import 'mind-ar/dist/mindar-image-aframe.prod.js'

It can be resolved by using the script installs.

<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mindar-image-aframe.prod.js"></script>

The repo has been updated demonstrate this.