Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gnvcor opened this issue Jun 18, 2024 · 3 comments
Open

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

gnvcor opened this issue Jun 18, 2024 · 3 comments

Comments

@gnvcor
Copy link

gnvcor commented Jun 18, 2024

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:
image

If the current behavior is a bug, please provide the steps to reproduce.
import package @ar-js-org/ar.js
image
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 gnvcor changed the title es-module @ar-js-org/ar.js doesn't work es-modules @ar-js-org/ar.js doesn't work Jun 18, 2024
@gnvcor
Copy link
Author

gnvcor commented Jun 26, 2024

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

@nickw1
Copy link
Collaborator

nickw1 commented Sep 11, 2024

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
Copy link
Collaborator

nickw1 commented Sep 12, 2024

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants