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.

Sign up for GitHub

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

Jump to bottom

Pure HTML + JS - Uncaught ReferenceError: three is not defined #261

Closed
caio1985 opened this issue Jan 13, 2022 · 6 comments
Closed

Pure HTML + JS - Uncaught ReferenceError: three is not defined #261

caio1985 opened this issue Jan 13, 2022 · 6 comments
Labels
priority: p3 Desirable enhancement or fix. May not be included in next release. released type: question Request for information or clarification. Not an issue.

Comments

@caio1985
Copy link

caio1985 commented Jan 13, 2022 •
edited by jpoehnelt
Loading

Hi,

I'm trying to modify a shipment tracking demo app that uses WebGL maps to use ThreeJS.
I'm purely using HTML + JS, no frameworks.

In my HTML code I have after before :

<script src="three.min.js"></script>
<script src="https://unpkg.com/@googlemaps/three/dist/index.min.js"></script>

When I load the HTML page, in Chrome dev tool's console, I see this error coming from the second javascript file listed above:

Uncaught ReferenceError: three is not defined
    at index.min.js:1:39366

If I also check the Network tab I see that three.min.js is loaded before index.min.js so it should've loaded three.min.js which seems to be a dependency in index.min.js.

I tried using a local version of three-js but also before that I tried using a CDN hosted version but nothing worked. I'm using r136 which is the same one that you have in the examples on https://github.com/googlemaps/js-three.

I'm running this on MacOS, starting my local webserver with gradlew appengineRun which will just create a local server.

Can you provide a pure HTML + JS sample code that would work?

Thanks!
@caio1985 caio1985 added triage me I really want to be triaged. type: bug Error or flaw in code with unintended results or allowing sub-optimal usage patterns. labels Jan 13, 2022
@jpoehnelt
Copy link
Contributor

See https://threejs.org/docs/#manual/en/introduction/Installation and usage of import maps in Compatibility section.

@jpoehnelt
Copy link
Contributor

This example show a workaround when using a cdn https://glitch.com/edit/#!/three-import-map?path=index.html.

@caio1985
Copy link
Author

Didn't work - tried different setups with the example above but none worked.

The head in my HTML file looks like this:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <script src="https://unpkg.com/es-module-shims@0.4.6/dist/es-module-shims.js"></script>
  <script type="importmap-shim">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.118.1/build/three.module.js",
      "three/examples/jsm/": "https://unpkg.com/three@0.118.1/examples/jsm/"
    }
  }
  </script>
  <script src="https://unpkg.com/@googlemaps/three/dist/index.min.js"></script>
  <title>Shipment Tracking</title>
</head>

The body tag on the same HTML is as following:

<body>
  <script type="module" src="shipment_tracking.js"></script>
  <script>
    var script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?callback=initializeJourneySharing&key=${API_KEY}&v=beta&libraries=journeySharing`;
    document.head.appendChild(script);
    console.log("Maps initialization started");
  </script>
</body>
</html>

The API key variable is loaded from another JS file just fine, so please ignore it.

In the console I still see the same error and also for some reason initializeJourneySharing cannot be found (it is defined inside the shipment_tracking.js which is loaded as a module). But this is another error, I believe the initial problem is still there.

index.min.js:1 Uncaught ReferenceError: three is not defined
    at index.min.js:1:39366
(anonymous) @ index.min.js:1
shipment_tracking.html:152 Maps initialization started
shipment_tracking.js:200 Uncaught SyntaxError: Unexpected token '.'
shipment_tracking.html:1 Uncaught (in promise) _.$e {message: 'initializeJourneySharing is not a function', name: 'InvalidValueError', stack: 'Error\n    at new _.$e (https://maps.googleapis.com…&v=beta&libraries=journeySharing:547:123'}
Promise.then (async)

@jpoehnelt
Copy link
Contributor

https://unpkg.com/@googlemaps/three/dist/index.min.js expects window.three to be defined
https://unpkg.com/@googlemaps/three/dist/index.esm.js makes an import ... from "three", it is not minified or targeted for wide browser support

either way, I recommend using a proper build tool or using only esm modules and avoiding the pattern you are using here

@jpoehnelt jpoehnelt added priority: p3 Desirable enhancement or fix. May not be included in next release. type: question Request for information or clarification. Not an issue. and removed type: bug Error or flaw in code with unintended results or allowing sub-optimal usage patterns. triage me I really want to be triaged. labels Jan 18, 2022
@Inthenew
Copy link

Inthenew commented Feb 5, 2022

right after you load three.js, add
<script> window.three = THREE; </script>

github-actions bot pushed a commit that referenced this issue Feb 7, 2022
@googlemaps-bot
docs(README): add note about three not defined
fc3b6a2 
closes #261 fe65dd6
github-actions bot pushed a commit that referenced this issue Feb 7, 2022
@semantic-release-bot
chore(release): 2.0.1 [skip ci]
eb8f1d1 
### [2.0.1](v2.0.0...v2.0.1) (2022-02-07)

### Documentation

* **README:** add note about three not defined ([fe65dd6](fe65dd6)), closes [#261](#261)
@github-actions
Copy link

github-actions bot commented Feb 7, 2022

🎉 This issue has been resolved in version 2.0.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@jpoehnelt jpoehnelt removed their assignment Jun 17, 2022
@Neon22 Neon22 mentioned this issue Mar 23, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
priority: p3 Desirable enhancement or fix. May not be included in next release. released type: question Request for information or clarification. Not an issue.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@caio1985 @jpoehnelt @Inthenew