Error: Cannot find module 'three'

[NicolasNewman]

I'm trying to add postprocessing to a website including three & three-nebula and which is bundled with Webpack. Unfortunately I'm getting an error saying cannot find module 'three'.

The error is occurring from this file:

import { Event, Object3D, PerspectiveCamera, PointLight, Scene } from "three";
import {Selection, SelectiveBloomEffect} from 'postprocessing';

function createStrandLight(scene: Scene, camera: PerspectiveCamera, objs: Object3D<Event>[]) {
    const bloom = new SelectiveBloomEffect(scene, camera, {
        intensity: 1.5,
        luminanceThreshold: 0.0001,
        mipmapBlur: true,
    });
    bloom.selection = new Selection(objs);

    const lights: PointLight[] = [];

    for (const bulb of objs) {
        const color = bulb.name.split('-')[1] ?? 'white';
        const light = new PointLight(color, 6, 0, 2);
        const { x, y, z } = bulb.position;
        light.position.set(x, y-0.15, z);

        lights.push(light);
        scene.add(light);
    }

    return {bloom, lights}
}

export {createStrandLight}

And my webpack config is:

import * as path from 'path'

export default {
  mode: 'development',
  entry: './src/main.ts',
  devServer: {
    port: 9000,
    static: {
      serveIndex: true,
      directory: __dirname
    }
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
    ]
  },
  watchOptions: {
    ignored: /node_modules/
  }
}

The full output of the error is:

Cannot find module 'three'
webpackEmptyContext@webpack://3js_test/./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/_sync?:2:10
POSTPROCESSING<@webpack://3js_test/./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/postprocessing.js?:172:33
@webpack://3js_test/./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/postprocessing.js?:15509:3
./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/postprocessing.js@http://localhost:9000/dist/bundle.js:444:1
__webpack_require__@http://localhost:9000/dist/bundle.js:2290:33
fn@http://localhost:9000/dist/bundle.js:2501:21
@webpack://3js_test/./src/app/components/strandlight.ts?:5:45
./src/app/components/strandlight.ts@http://localhost:9000/dist/bundle.js:1785:1
__webpack_require__@http://localhost:9000/dist/bundle.js:2290:33
fn@http://localhost:9000/dist/bundle.js:2501:21
@webpack://3js_test/./src/app/World.ts?:23:42
./src/app/World.ts@http://localhost:9000/dist/bundle.js:1730:1
__webpack_require__@http://localhost:9000/dist/bundle.js:2290:33
fn@http://localhost:9000/dist/bundle.js:2501:21
@webpack://3js_test/./src/main.ts?:15:33
./src/main.ts@http://localhost:9000/dist/bundle.js:1873:1
__webpack_require__@http://localhost:9000/dist/bundle.js:2290:33
@http://localhost:9000/dist/bundle.js:3359:56
@http://localhost:9000/dist/bundle.js:3361:12

Does anyone have any idea as to why this error is occurring? Thanks!

[vanruesc]

Did you install the peer dependency three?

[NicolasNewman]

Yes, I ended up resolving the issue by doing what I mentioned in the answer. Thank you for confirming though!

[NicolasNewman]

In my particular case changing the module type to ESNext in my typescript config resolved the issue.

Example:

{
    "compilerOptions": {
      "lib": [
        "es2015",
        "dom"
      ],
      "resolveJsonModule": true,
      "esModuleInterop": true,
      "sourceMap": true,
      "declaration": false,
      "module": "ESNext",
      "moduleResolution": "node",
      "target": "es2015"
      "strict": true,
    }
}