Import Issues Referencing Pass.js and ESM / CJS Mismatch

[paperschool]

Error Message:

index.js:683 Uncaught Error: require() of ES Module 
<path>/node_modules/three/examples/jsm/postprocessing/Pass.js from
<path>/node_modules/@pmndrs/vanilla/index.cjs.js not supported.
Instead change the require of Pass.js in 
<path>/node_modules/@pmndrs/vanilla/index.cjs.js to a dynamic import() 
which is available in all CommonJS modules.

• nextjs version: ^14.1.0
• three version: 0.168.0
• @pmndrs/vanilla version: ^1.20.4
• node version: v20.11.1
• npm (or yarn) version: │0.39.0

Problem description:

Tried importing the Clouds export of the package, seems to cause the above error. Worth stressing this is within a NextJs application

Relevant code:

import { Clouds } from "@pmndrs/vanilla";

Suggested solution:

Seems to suggest a solution in the error message, I am doing a lot of things with shader passes but nothing that is replacing the one built into threejs so perhaps its a minimum versioning issue?