Uncaught SyntaxError: Unexpected token '<'

Questions
1

test5

when i load my canvas at start itself im getting this error , cause of this three js is not working. Please help.

<!DOCTYPE html>
<html lang="en" style="overflow: hidden;">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <script src="./webcomponents-bundle.js"></script>
    <script src="../node_modules/three/build/three.js"></script>
  <script src="../node_modules/three/examples/js/controls/OrbitControls.js"></script>

  <script src="../node_modules/three/examples/js/renderers/CSS2DRenderer.js"></script> 
    <script src="../node_modules/three/examples/js/loaders/STLLoader.js"></script> 
    <script src="../node_modules/three/examples/js/loaders/PCDLoader.js"></script> 
   <!--  <script src="../node_modules/three/examples/js/loaders/ColladaLoader.js"></script> -->
    <script src="../node_modules/threejs-model-loader/ModelLoader.js"></script>
    <script src="./umd/URDFLoader.js"></script>
    <script src="./umd/urdf-viewer-element.js"></script>
    <script src="./umd/urdf-manipulator-element.js"></script>
   <script>
      /* globals URDFViewer */
      customElements.define('urdf-viewer', URDFManipulator)
    </script> 

    <link href="./styles.css" rel="stylesheet" />

    <title>MasdA</title>
  </head>

  <!-- oncontextmenu="return false;" -->
  <body>
    <noscript>
      <strong
        >doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

this is my index.html

it was working fine when it was like this.

<!DOCTYPE html>
<html lang="en" style="overflow: hidden;">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <script src="./webcomponents-bundle.js"></script>>
    <script src="./threejs/build/three.js"></script>
  <script src="./threejs/examples/js/controls/OrbitControls.js"></script>

  <script src="./threejs/examples/js/renderers/CSS2DRenderer.js"></script> 
    <script src="./threejs/examples/js/loaders/STLLoader.js"></script> 
    <script src="./threejs/examples/js/loaders/PCDLoader.js"></script> 
   <!--  <script src="./threejs/examples/js/loaders/ColladaLoader.js"></script> -->
    <script src="./threejs-model-loader/ModelLoader.js"></script>
    <script src="./umd/URDFLoader.js"></script>
    <script src="./umd/urdf-viewer-element.js"></script>
    <script src="./umd/urdf-manipulator-element.js"></script>
   <script>
      /* globals URDFViewer */
      customElements.define('urdf-viewer', URDFManipulator)
    </script> 

    <link href="./styles.css" rel="stylesheet" />

    <title>MasdA</title>
  </head>

  <!-- oncontextmenu="return false;" -->
  <body>
    <noscript>
      <strong
        > doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
2

The path to the files (../node_modules/..) is incorrect.
Check the proper path (probably ../node_modules/threejs/.. instead of ../node_modules/three/.. everywhere.)

1 Like
3

Hey @super21z! That’s actually from my URDFLoader package it looks like – I haven’t touched that file in awhile and is from when I was still trying to make build-less example pages (which I’ve since given up on).

It’s hard to tell exactly what’s wrong from the code you’ve posted but make sure you’ve run npm install in the root directory. At this point it’s best to use a build process if you want to use node_modules or manage your library dependencies manually as you have in your threejs folder if you want to use the global scripts workflow.

1 Like
4

Don’t worry, it’s not because of the package. He isn’t loading Three at all, so Three.Object3D is obviously undefined - that’s why the package and the reminder of the code fails. Error says < because ../node_modules/three/build/three.js returns an XML error page.

1 Like
5

Ha thanks! I’m using the package frequently so I know it’s not that.

The error Unexpected token '<' is usually associated with someting like a 404 or html page being served in place of JS when the file isn’t available which is why I think node_modules isn’t available.

2 Likes