looeee / discoverthreejs-site

Repo for the book Discover three.js!
https://discoverthreejs.com/
748 stars 98 forks source link

BUG https://cdn.skypack.dev/three@0.136.2 not found #92

Open pflagerd opened 1 year ago

pflagerd commented 1 year ago

Please report bugs, rendering errors, CSS problems, cross-browser issues and so on here. If you have found a mistake in the text, you can also report it here, although there's no need to report OS/browser details in that case.

Describe the bug When performing "Download as Zip" from IDE, zipped site contains references to https://cdn.skynet.dev/three@0.132.2 which does not exist. As of this date, references to https://cdn.skynet.dev/three produce 0.148.0 as the only option:

/*
 * Skypack CDN - three@0.148.0
 *
 * Learn more:
 *   📙 Package Documentation: https://www.skypack.dev/view/three
 *   📘 Skypack Documentation: https://www.skypack.dev/docs
 *
 * Pinned URL: (Optimized for Production)
 *   ▶️ Normal: https://cdn.skypack.dev/pin/three@v0.148.0-ZdnPTf2EskNtHkVhjjpp/mode=imports/optimized/three.js
 *   ⏩ Minified: https://cdn.skypack.dev/pin/three@v0.148.0-ZdnPTf2EskNtHkVhjjpp/mode=imports,min/optimized/three.js
 *
 */

// Browser-Optimized Imports (Don't directly import the URLs below in your application!) export * from '/-/three@v0.148.0-ZdnPTf2EskNtHkVhjjpp/dist=es2019,mode=imports/optimized/three.js'; export {default} from '/-/three@v0.148.0-ZdnPTf2EskNtHkVhjjpp/dist=es2019,mode=imports/optimized/three.js';

To Reproduce Steps to reproduce the behavior:

  1. From a browser, navigate to https://discoverthreejs.com/book/first-steps/first-scene/
  2. Click on the "Show IDE" icon in the far upper-left corner of the browser client area to make sure the IDE is visible: image
  3. From the IDE, click the "Download as Zip" icon: image
  4. When the download completes, you should have a file like the following in your Downloads/ directory: image
  5. Unzip the file and locate src/main.js. Observe that it contains an import statement as follows.
    import {
    BoxBufferGeometry,
    Color,
    Mesh,
    MeshBasicMaterial,
    PerspectiveCamera,
    Scene,
    WebGLRenderer,
    } from 'https://cdn.skypack.dev/three@0.136.2';
  6. Observe that the import refers to three version 0.136.2.
  7. From a browser, attempt to navigate to 'https://cdn.skypack.dev/three@0.136.2'
  8. Observe this message in your browser: Package "three" exists, but could not match version "0.136.2".

Expected behavior (optional) Attempting to navigate to 'https://cdn.skypack.dev/three@0.136.2' should result in something like this in your browser:

image

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

gisfinder commented 1 year ago

the source file "vendor/three/build/three.module.js" is wrong.

pflagerd commented 1 year ago

I agree that the source file "vendor/three/build/three.module.js" looks wrong. It looks like html. But I cannot find where it is referenced in the source code anywhere. In fact, after finding a fix for the cdn.skypack.dev version problem, I removed the vendor/ directory entirely and suffered no ill effects. Code appeared to work the same.

pflagerd commented 1 year ago

I found that if I replaced 0.136.2 with 0.149.0, I could run MOST of the code examples. However, I also found a compatibility problem with the import in the controls.js file of those code examples that have controls.js (not all do).

import { OrbitControls} from 'https://cdn.skypack.dev/three@0.149.0/examples/jsm/controls/OrbitControls.js';

causes a Chrome/Chromium 118.0.5993.88 browser instance to complain in its console (and no scene is displayed) thus:

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

Seems that the problem is somewhat unique to cdn.skypack.dev as replacing it with esm.sh or jspm.dev in the offending import results in the scene being correctly displayed.

e.g.

import { OrbitControls} from 'https://esm.sh/three@0.149.0/examples/jsm/controls/OrbitControls.js';
pflagerd commented 1 year ago

I guess I will work on replacing cdn.skypack.dev and changing the version number to 0.149.0 in my fork.

It would probably be wise to make it clear in the text of the site and/or the code examples themselves that we are using 0.149.0 which is not the most recent version.

pflagerd commented 1 year ago

Also begs the question "How about examples which use the npm import style for running locally?"