javascriptthree.jscdn

Why do CDN links work for some versions but not others? NS_ERROR_CORRUPTED_CONTENT


I'm creating a webpage that uses Three.js.

If I use all CDN links from Version 128, my page loads fine:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://unpkg.com/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/three@0.128.0/examples/js/loaders/EXRLoader.js"></script>

But I would like to use the most recent version for my project, and according to cdnjs that is version 172.

Screenshot of the cdnjs page for Three.js, which shows the more recent version as being 172

Switching to this more recent version (172) causes everything to break:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r172/three.min.js"></script>
<script src="https://unpkg.com/three@0.172.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/three@0.172.0/examples/js/loaders/EXRLoader.js"></script>

My browser's console reads:

GET
https://cdnjs.cloudflare.com/ajax/libs/three.js/r172/three.min.js
NS_ERROR_CORRUPTED_CONTENT

GET
https://unpkg.com/three@0.172.0/examples/js/loaders/GLTFLoader.js
NS_ERROR_CORRUPTED_CONTENT

GET
https://unpkg.com/three@0.172.0/examples/js/loaders/EXRLoader.js
NS_ERROR_CORRUPTED_CONTENT

And naturally, this is followed by more errors that result from not being able to read the scripts.

Apparently I missed the memo on the unspoken rules of which CDN assets are okay to use and which aren't, and how to look that info up and/or resolve the problem. Can someone please enlighten me? How can I successfully use the current (or at least a recent) version of Three.js through a CDN?


Post-resolution edit:

As a side note, when importing loaders like EXRLoader.js, people might find it easier to install Three.js and serve the files themselves. Then use importmap to resolve the module paths.

Alternatively, the Express framework for Node.js can be used to serve the files and resolve the paths. Or, a bundler like Vite, Webpack, or Parcel can resolve them.

These tools are beyond the scope of this question, but related to it.


Solution

  • If you look at your URL, you'll see it doesn't match anything in the screenshot of the CDN's available URL's.

    Try this: https://cdnjs.cloudflare.com/ajax/libs/three.js/0.172.0/three.core.min.js

    Did you get that malformed URL from the 'copy' button on the cloudflare site? If you did, you might need to report it as an error, it looks like they changed the way they construct the URL from the version number.

    In future, you can also check an script source by just pasting the URL into the browser. It should open as plaintext javascript. If you do this with the busted URL you were using, you'll see that it returns a 404 page as HTML. This triggers a NS_ERROR_CORRUPTED_CONTENT warning as a <script> tag import, because HTML content is not valid javascript content.

    edit: I should have mentioned, the actual library documentation is always a good place to look: https://threejs.org/docs/index.html#manual/en/introduction/Installation.

    From the folder structure on three's CDN, provided unpkg is following that, it should be: https://unpkg.com/three@0.172.0/examples/jsm/loaders/EXRLoader.js