Can't implement post-processing with EffectComposer

Im trying to implement post-processing effects in Three.js through this example here:
https://threejs.org/docs/#manual/en/introduction/How-to-use-post-processing

With the following code:

import * as THREE from 'three';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';

var scene, camera, renderer, box, composer;

init();

function init() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color("#333333");
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshStandardMaterial({ color: new THREE.Color('skyblue') });
  box = new THREE.Mesh(geometry, material);

  scene.add(box);

  const light = new THREE.DirectionalLight();
  light.position.set(0, 1, 2);
  scene.add(light);

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 3;
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

  // add EFFECT
  composer = new EffectComposer(renderer);
  composer.addPass(new RenderPass(scene, camera));
  const filmPass = new FilmPass(0.35, 0.025, 648, false,);
  filmPass.renderToScreen = true;
  composer.addPass(filmPass);

  window.addEventListener('resize', onResize, false);

  update();
}

function update() {
  requestAnimationFrame(update);
  box.rotation.y += 0.01;
  composer.render(scene, camera);
}

function onResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  composer.setSize(window.innerWidth, window.innerHeight);
}

This gives me error that it cant find /node_modules/three/examples/jsm/postprocessing/
This is indead true. The file does not exist anymore for some reason in my version of three

I found this and did try to install and use that instead but without success:
https://www.npmjs.com/package/postprocessing

npm install three postprocessing

And the following code:

import * as THREE from 'three';
import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocessing";

var scene, camera, renderer, box, composer;

init();

function init() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color("#333333");
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshStandardMaterial({ color: new THREE.Color('skyblue') });
  box = new THREE.Mesh(geometry, material);

  scene.add(box);

  const light = new THREE.DirectionalLight();
  light.position.set(0, 1, 2);
  scene.add(light);

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 3;
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

  // add EFFECT
  composer = new EffectComposer(renderer);
  composer.addPass(new RenderPass(scene, camera));
  // const filmPass = new BloomEffect());
  // filmPass.renderToScreen = true;
  composer.addPass(new BloomEffect());

  window.addEventListener('resize', onResize, false);

  update();
}

function update() {
  requestAnimationFrame(update);
  box.rotation.y += 0.01;
  composer.render(scene, camera);
}

function onResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  composer.setSize(window.innerWidth, window.innerHeight);
}

This render my scene all black.

What am I doing wrong? How do I implement EffectComposer in Three.js

/cc