CODEWITHSUNDEEP
ecmascript-6three.js
Lance
Lance

Reputation: 35

Browser Console [Error]: Uncaught SyntaxError: Unexpected token 'export' from WebGL.js

I am following three.js documentation to create scene to show rotating box. A green rotating box was shown without issue following here. But when I tried to include WebGL compatibility check, code as shown below:

<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script src="js/WebGL.js"></script>

        <script>

            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            var geometry = new THREE.BoxGeometry( 1, 1, 1 );
            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            var cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = 5;

            var animate = function () {
                requestAnimationFrame( animate );

                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;

                renderer.render( scene, camera );
            };

            if ( WEBGL.isWebGLAvailable() ) {

            // Initiate function or other initializations here
            animate();

            } else {

            var warning = WEBGL.getWebGLErrorMessage();
            document.getElementById( 'container' ).appendChild( warning );

            }


        </script>
    </body>
</html>

, browser console shows error: Uncaught SyntaxError: Unexpected token 'export' from WebGL.js.

There isn't any issue threads in three.js Github about it. I wonder what could be the issue? Please help

Upvotes: 2

Views: 4168

Answers (1)

David Peicho
David Peicho

Reputation: 492

The error states error: Uncaught SyntaxError: Unexpected token 'export', meaning that the JavaScript parser failed. It's not a Three.js error.

According to your link WebGL compatibility check, the code you imported is a JavaScript ES module. Take a look at this line. This line uses the export keyword, used to export a module. Thus, you are dealing with a module here and not a classic JS script.

If you want to include a module and not a simple script, you need to use:

<script src="js/three.js"></script>
<script type="module">
  import { WebGL } from 'js/WebGL.js';
  if ( WEBGL.isWebGLAvailable() ) {
    // ...
  }
</script>

You can also directly use the WebGL script file instead of the JS module, if that's easier for you. You can find it here. Then, you should be able to access the WEBGL namespace like that:

if ( THREE.WEBGL.isWebGLAvailable() ) {

  // WebGL is available

} else {

  // WebGL isn't available :(

}

I would recommend that you read the difference between a JS script and modules. For instance here.

Upvotes: 1

Related Questions