Uncaught Error: Cannot find module 'three'

[jasoncslaughter]

I am getting the error Uncaught Error: Cannot find module 'three' in the console log any time I try to use react-postprocessing. I am assuming that it is an incompatibility between the versions of the libraries I am using, maybe? All base functionality of @react-three/fiber seems to work fine, it is only when I include the EffectComposer tag do I get the error. I tried to create an example on https://codesandbox.io/, but there it seems to work OK there.

Here is the example code:

import { Sphere } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { EffectComposer, Noise } from "@react-three/postprocessing";
import classNames from "classnames";
import React, { FunctionComponent } from "react";
import { Back } from "./components/back";
import { MainMenu } from "./components/main-menu";
import { Page } from "./components/page";
import { PageTitle } from "./components/page-title";
import { Settings } from "./components/settings";

export const App: FunctionComponent = () => {
  return (
    <div>
      <div
        className={classNames(
          "absolute",
          "top-0",
          "left-0",
          "w-100vw",
          "h-100vh"
        )}
      >
        <Canvas>
          <pointLight position={[10, 10, 10]} />
          <Sphere>
            <meshBasicMaterial attach="material" color="hotpink" />
          </Sphere>
          <EffectComposer>
            <Noise opacity={0.4} />
          </EffectComposer>
        </Canvas>
      </div>
      <Page id="main-menu" path="/">
        <MainMenu />
      </Page>
      <Page id="about" path="/about">
        <>
          <PageTitle>
            <span>About</span>
          </PageTitle>
          <Back href="/">Back</Back>
        </>
      </Page>
      <Page id="settings" path="/settings">
        <Settings />
      </Page>
    </div>
  );
};

export default App;

And here are my project dependencies:

    "@headlessui/react": "^1.2.0",
    "@react-three/drei": "^6.0.1",
    "@react-three/fiber": "^6.2.2",
    "@react-three/postprocessing": "^2.0.4",
    "@types/howler": "^2.2.2",
    "@types/react": "^17.0.9",
    "@types/react-dom": "^17.0.6",
    "@types/three": "^0.129.0",
    "classnames": "^2.3.1",
    "howler": "^2.2.1",
    "immer": "^9.0.2",
    "localforage": "^1.9.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "rot-js": "^2.1.5",
    "three": "^0.129.0",
    "wouter": "^2.7.4",
    "zustand": "^3.5.1"

console.log error:

index.ed731f93.js:61 Uncaught Error: Cannot find module 'three'
    at newRequire (index.ed731f93.js:61)
    at newRequire (index.ed731f93.js:45)
    at localRequire (index.ed731f93.js:83)
    at __require (index.ed731f93.js:126047)
    at index.ed731f93.js:126183
    at Object.j7QVa (index.ed731f93.js:132603)
    at newRequire (index.ed731f93.js:71)
    at localRequire (index.ed731f93.js:83)
    at Object.4OkVz.postprocessing (index.ed731f93.js:126027)
    at newRequire (index.ed731f93.js:71)
newRequire @ index.ed731f93.js:61
newRequire @ index.ed731f93.js:45
localRequire @ index.ed731f93.js:83
__require @ index.ed731f93.js:126047
(anonymous) @ index.ed731f93.js:126183
j7QVa @ index.ed731f93.js:132603
newRequire @ index.ed731f93.js:71
localRequire @ index.ed731f93.js:83
4OkVz.postprocessing @ index.ed731f93.js:126027
newRequire @ index.ed731f93.js:71
localRequire @ index.ed731f93.js:83
1D8Pk.@react-three/drei @ index.ed731f93.js:26279
newRequire @ index.ed731f93.js:71
localRequire @ index.ed731f93.js:83
5mCR7.react @ index.ed731f93.js:1056
newRequire @ index.ed731f93.js:71
(anonymous) @ index.ed731f93.js:120
(anonymous) @ index.ed731f93.js:143

Has anyone seen this issue before, or have any idea what might be causing it?

Thank you!

[jasoncslaughter]

I did some more sleuthing on this, and I discovered part of what is happening. For some reason, it looks like when react-postprocessing is referencing postprocessing, it is resolving to node_modules/postprocessing/build/postprocessing.js instead of node_modules/postprocessing/build/postprocessing.esm.js.

I was able to work around this by adding the following to package.json:

"alias": {
  "postprocessing": "./node_modules/postprocessing/build/postprocessing.esm.js"
},

Any ideas of what might be causing this would be greatly appreciated. A bug in Parcel maybe?

[talentlessguy]

it's not a library issue, it's a bundler issue

three is a peer dependency