Sample Code Rendering Error under VSCode

CesiumJS
1

Dear Community,

  1. I have copied and pasted the code at this link (an official Cesium site) into VS Code
  2. I have attempted to run the code under VS Code’s “Run and Debug”
  3. In Chrome, what I see are the 3D buildings and a starry sky but the globe and terrain are not rendered
  4. The following errors are produced on the console log:
    1. Cesium.js:16371 Uncaught TypeError: Cannot read properties of null (reading ‘createElement’)
      (anonymous) @ Cesium.js:16371
      test.html:1 Refused to cross-origin redirects of the top-level worker script.
      test.html:1 Refused to cross-origin redirects of the top-level worker script.
  5. The following error is shown in the VS Code Debug Console:
    1. Uncaught Error
      at (cesium.com/downloads/cesiumjs/releases/1.134/Build/Cesium/Cesium.js:16371:3387)

I have only done a “Copy and Paste” and have not added anything to the code as shown on the Cesium page.

Can someone tell me what I’m missing?

Thank you,

Clyde

2

Hi @cwford, this looks like a CORS issue. I can reproduce it in VSCode if I only load the html file. I can fix it by setting up a launch.json to configure VSCode to disregard CORS issues.

See https://code.visualstudio.com/docs/debugtest/debugging-configuration for details about how to set up a launch.json file. The setting I used is described in this StackOverflow answer.

The setting disable-web-security is kind of a brute-force way of getting it to run. If you are doing extensive development work you may want to learn more about setting up a local server and configuring the CORS directly.