es-modules @ar-js-org/ar.js doesn't work

[gnvcor]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
I import package @ar-js-org/ar.js in my project and i catch error:

If the current behavior is a bug, please provide the steps to reproduce.
import package @ar-js-org/ar.js

My code:

import React, { useEffect, useState } from 'react';
import '@ar-js-org/ar.js';

function ARScene() {
    const [coordinates, setCoordinates] = useState({ latitude: 0, longitude: 0 });

    useEffect(() => {
        navigator.geolocation.getCurrentPosition(
            position => {
                const { latitude, longitude } = position.coords;
                setCoordinates({ latitude, longitude });
            },
            error => {
                console.error('Error getting geolocation:', error);
            }
        );
    }, []);

    return (
        <a-scene
            vr-mode-ui="enabled: false"
            arjs="sourceType: webcam; videoTexture: true; debugUIEnabled: false;"
        >
            <a-assets>
                <img id="banner" src="./banner_2.jpg" />
            </a-assets>
            <a-entity gps-entity-place={`latitude: ${coordinates.latitude}; longitude: ${coordinates.longitude};`}>
                <a-plane
                  position="0 1.6 -3"
                  rotation="0 0 0"
                  width="3"
                  height="1.5"
                  src="#banner"
                ></a-plane>
              </a-entity>
            <a-camera camera="active: true" rotation-reader></a-camera>
        </a-scene>
    );
}

function AppWithCamera() {
    return (
        <div className="App">
            <ARScene />
        </div>
    );
}

export default AppWithCamera;

Please mention other relevant information such as the browser version, Operating System and Device Name
Google Chrome 126.0.6478.56
macos 14.4 (23E214)

What is the expected behavior?

If this is a feature request, what is motivation or use case for changing the behavior?

[gnvcor]

Guys, is there anyone here whose es-modules work?

[nickw1]

EDIT: Just looked at #538:

You need to make sure your A-Frame and AR.js versions match.

AR.js 3.4.5 works with A-Frame 1.3.0.
AR.js 3.4.4 works with A-Frame 1.0.4.

Ensure you have matching versions.

[nickw1]

@gnvcor to add to this: if you don't explicitly state the A-Frame version in package.json it will use the most recent (1.6.0) which unfortunately is not compatible with AR.js.

If you explicitly add A-Frame at version 1.3.0 in the package.json, it definitely works with the es-module import: I have tested it just now.

[lvjzijin]

I used two different aframes and @ar-js-org/ar.js, but still reported the above problem, how should I do

[nickw1]

@lvjzijin can you provide your full code including build scripts, if possible? Thanks.

[lvjzijin]

@lvjzijin can you provide your full code including build scripts, if possible? Thanks.

package.json

I create a project use create-react-app , npm install some packages and add some demo code in App.js, but it not work

[nickw1]

Ah, I think there are some long standing issues with using AR.js and React together, due to the different ways A-Frame and React initialise. It's possible #615 may address this.

Does it work for you with modules but without React?