Javascript – Can import all THREE.js post processing modules as ES6 modules except OutputPass

Problem:

I am trying to replicate this example but with modules imported from CDN.

With the following import map:

<script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
<script type="importmap">
    {
        "imports": {
            "three": "https://cdn.skypack.dev/three@0.136.0",
            "three/addons/": "https://cdn.skypack.dev/three@0.136.0/examples/jsm/"
        }
    }
</script>

And the following imports

// ...
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer';
import { RenderPass } from 'three/addons/postprocessing/RenderPass';
import { SAOPass } from 'three/addons/postprocessing/SAOPass';
import { OutputPass } from 'three/addons/postprocessing/OutputPass';

I get an error only for the last import “OutputPass”:

GET https://cdn.skypack.dev/-/three@v0.136.0-4Px7Kx1INqCFBN0tXUQc/dist=es2019,mode=raw/examples/jsm/postprocessing/OutputPass net::ERR_ABORTED 404

I have tried figuring out why this module won’t import correctly, but I have not found a single clue.

Any help is welcome!

Solution:

OutputPass was added with r153, you are importing r136. So you can easily fix the issue by just upgrading three.js to the latest version.