Error: Cannot find module 'three' #168

z-dmgy · 2022-12-13T06:50:02Z

Using @react-three/postprocessing in next js 13 will cause an error to occur，

drewxs · 2022-12-21T19:23:27Z

Can confirm this is still an issue.

Dependencies (package.json):

"dependencies": {
  "@react-three/drei": "^9.47.1",
  "@react-three/fiber": "^8.9.1",
  "@react-three/postprocessing": "^2.7.0",
  "next": "13.0.7",
  "postprocessing": "^6.29.1",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "three": "^0.146.0"
}

Component code:

'use client';

import { GradientTexture } from '@react-three/drei';
import { Canvas } from '@react-three/fiber';
import { Bloom, DepthOfField, EffectComposer, Noise } from '@react-three/postprocessing';
import { ReactElement, useRef } from 'react';
import { DoubleSide, Mesh } from 'three';

interface Props {
  width: number;
  height: number;
  segments?: number;
}

export const Gradient = ({ width, height, segments = 8 }: Props): ReactElement => {
  const colors = ['#ff00ff', '#ff0000', '#ffffff', '#ffff00', '#00ff00', '#00ffff', '#0000ff'];
  const stops = colors.map((_, i) => i / colors.length);
  const mesh = useRef<Mesh>(null!);

  return (
    <Canvas>
      <ambientLight intensity={1000} />
      <mesh ref={mesh} scale={[1, 1, 1]} position={[0, 0, 0]}>
        <planeGeometry args={[height, width, segments, segments]} />
        <meshBasicMaterial side={DoubleSide}>
          <GradientTexture stops={stops} colors={colors} />
        </meshBasicMaterial>
      </mesh>
      <EffectComposer multisampling={0} disableNormalPass={true}>
        <DepthOfField focusDistance={0.5} focalLength={0.1} bokehScale={2} height={700} />
        <Bloom luminanceThreshold={0} luminanceSmoothing={0.1} height={300} opacity={3} />
        <Noise opacity={0.1} />
      </EffectComposer>
    </Canvas>
  );
};

export default Gradient;

Stack trace (next dev):

> [email protected] dev /home/drew/code/test
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /home/drew/code/test/.env.local
info  - Loaded env from /home/drew/code/test/.env
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

event - compiled client and server successfully in 642 ms (234 modules)
wait  - compiling /page (client and server)...
warn  - ./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/postprocessing.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/postprocessing.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
Error: Cannot find module 'three'
    at webpackEmptyContext (/home/drew/code/test/.next/server/app/page.js:22:10)
    at eval (webpack-internal:///(sc_client)/./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/postprocessing.js:168:24)
    at eval (webpack-internal:///(sc_client)/./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/postprocessing.js:9554:3)
    at (sc_client)/./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/postprocessing.js (/home/drew/code/test/.next/server/app/page.js:8362:1)
    at __webpack_require__ (/home/drew/code/test/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./node_modules/.pnpm/@[email protected]_aj5kj473hsgheg4miwvuwybosy/node_modules/@react-three/postprocessing/dist/index.cjs:5:22)
    at (sc_client)/./node_modules/.pnpm/@[email protected]_aj5kj473hsgheg4miwvuwybosy/node_modules/@react-three/postprocessing/dist/index.cjs (/home/drew/code/test/.next/server/app/page.js:8794:1)
    at __webpack_require__ (/home/drew/code/test/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./components/aurora/aurora.component.tsx:10:85)
    at (sc_client)/./components/aurora/aurora.component.tsx (/home/drew/code/test/.next/server/app/page.js:6859:1)
    at __webpack_require__ (/home/drew/code/test/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./components/client.ts:21:82)
    at (sc_client)/./components/client.ts (/home/drew/code/test/.next/server/app/page.js:6892:1)
    at __webpack_require__ (/home/drew/code/test/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./views/gallery/gallery.view.tsx:8:75)
    at (sc_client)/./views/gallery/gallery.view.tsx (/home/drew/code/test/.next/server/app/page.js:8223:1)
    at __webpack_require__ (/home/drew/code/test/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./views/client.ts:8:79)
    at (sc_client)/./views/client.ts (/home/drew/code/test/.next/server/app/page.js:8201:1)
    at __webpack_require__ (/home/drew/code/test/.next/server/webpack-runtime.js:33:43)
    at requireModule (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:142:32)
    at initializeModuleChunk (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:427:19)
    at readChunk (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:252:7)
    at renderLazyComponent (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8043:19)
    at renderElement (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8155:11)
    at renderNodeDestructiveImpl (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8232:11)
    at renderNodeDestructive (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8204:14)
    at renderNode (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8388:12)
    at renderChildrenArray (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8340:7)
    at renderNodeDestructiveImpl (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8269:7)
    at renderNodeDestructive (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8204:14)
    at renderNode (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8388:12)
    at renderChildrenArray (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8340:7)
    at renderNodeDestructiveImpl (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8269:7)
    at renderNodeDestructive (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8204:14)
    at renderContextProvider (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8029:3)
    at renderElement (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8143:11)
    at renderNodeDestructiveImpl (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8232:11)
    at renderNodeDestructive (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8204:14)
    at finishClassComponent (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7786:3)
    at renderClassComponent (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7794:3)
    at renderElement (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8062:7)
    at renderNodeDestructiveImpl (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8232:11)
    at renderNodeDestructive (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8204:14)
    at renderIndeterminateComponent (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7884:7)
    at renderElement (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8065:7)
    at renderNodeDestructiveImpl (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8232:11)
    at renderNodeDestructive (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8204:14)
    at finishClassComponent (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7786:3)
    at renderClassComponent (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7794:3) {
  code: 'MODULE_NOT_FOUND'
}

Stack trace (next build):

> [email protected] build /home/drew/code/test
> next build

info  - Loaded env from /home/drew/code/test/.env.local
info  - Loaded env from /home/drew/code/test/.env
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

info  - Creating an optimized production build
warn  - Compiled with warnings

./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/postprocessing.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/postprocessing.js
./node_modules/.pnpm/@[email protected]_aj5kj473hsgheg4miwvuwybosy/node_modules/@react-three/postprocessing/dist/index.cjs
./components/aurora/aurora.component.tsx
./components/client.ts

./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/postprocessing.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/postprocessing.js
./node_modules/.pnpm/@[email protected]_aj5kj473hsgheg4miwvuwybosy/node_modules/@react-three/postprocessing/dist/index.cjs
./components/aurora/aurora.component.tsx
./components/client.ts

info  - Linting and checking validity of types
info  - Collecting page data
[=   ] info  - Generating static pages (2/3)Error: Cannot find module 'three'
    at webpackEmptyContext (/home/drew/code/test/.next/server/app/page.js:11:10)
    at /home/drew/code/test/.next/server/chunks/11.js:68407:24
    at 61814 (/home/drew/code/test/.next/server/chunks/11.js:77793:3)
    at __webpack_require__ (/home/drew/code/test/.next/server/webpack-runtime.js:25:43)
    at 54819 (/home/drew/code/test/.next/server/chunks/11.js:85748:22)
    at __webpack_require__ (/home/drew/code/test/.next/server/webpack-runtime.js:25:43)
    at 90279 (/home/drew/code/test/.next/server/app/page.js:44592:12)
    at __webpack_require__ (/home/drew/code/test/.next/server/webpack-runtime.js:25:43)
    at 78996 (/home/drew/code/test/.next/server/app/page.js:46410:14)
    at __webpack_require__ (/home/drew/code/test/.next/server/webpack-runtime.js:25:43) {
  code: 'MODULE_NOT_FOUND'
}

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Cannot find module 'three'
    at webpackEmptyContext (/home/drew/code/test/.next/server/app/page.js:11:10)
    at /home/drew/code/test/.next/server/chunks/11.js:68407:24
    at 61814 (/home/drew/code/test/.next/server/chunks/11.js:77793:3)
    at __webpack_require__ (/home/drew/code/test/.next/server/webpack-runtime.js:25:43)
    at 54819 (/home/drew/code/test/.next/server/chunks/11.js:85748:22)
    at __webpack_require__ (/home/drew/code/test/.next/server/webpack-runtime.js:25:43)
    at 90279 (/home/drew/code/test/.next/server/app/page.js:44592:12)
    at __webpack_require__ (/home/drew/code/test/.next/server/webpack-runtime.js:25:43)
    at 78996 (/home/drew/code/test/.next/server/app/page.js:46410:14)
    at __webpack_require__ (/home/drew/code/test/.next/server/webpack-runtime.js:25:43)
info  - Generating static pages (3/3)

> Build error occurred
Error: Export encountered errors on following paths:
        /page: /
    at /home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/export/index.js:409:19
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Span.traceAsyncFn (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/trace/trace.js:79:20)
    at async /home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/build/index.js:1345:21
    at async Span.traceAsyncFn (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/trace/trace.js:79:20)
    at async /home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/build/index.js:1205:17
    at async Span.traceAsyncFn (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/home/drew/code/test/node_modules/.pnpm/[email protected]_a35dlepzvml2hpheugyyhyekyi/node_modules/next/dist/build/index.js:66:29)
 ELIFECYCLE  Command failed with exit code 1.

Despite the errors, the app seems to run fine during next dev with the postprocessing effects visible, but fails during next build.

z-dmgy · 2022-12-24T04:33:18Z

@drewxs My situation is exactly the same as yours.

drewxs · 2022-12-27T09:18:04Z

@z-dmgy Switching my application over back to using the pages directory seems to work. The issue appears to be with Next's new experimental app directory.

Since the app directory is still in beta and Next recommends not to use it in production, I believe we can close this issue.

z-dmgy · 2022-12-27T09:35:41Z

@drewxs It seems that this is the problem. I decided to switch back. Thank you for sharing.

talentlessguy · 2022-12-27T09:37:07Z

btw if still not opened, worth opening an issue on next js repo instead.

z-dmgy · 2022-12-27T09:39:55Z

@talentlessguy I will.

fabioalcocer · 2023-03-09T21:15:50Z

is there a solution now?

paralin · 2023-03-10T03:09:10Z

Same issue here, what gives?

z-dmgy · 2023-03-10T03:13:24Z

@fabioalcocer @paralin

This is a problem with the app directory. At present, there is no solution. You can only return to the pages directory.

ahulterstrom · 2023-04-20T16:24:33Z

If this is "not an issue" because app directory is not production ready, why is the "official starter" for react three fiber using app directory?

QuentinMerabet · 2023-04-21T05:49:17Z

Too bad this issue is closed.

drewxs · 2023-04-22T02:04:01Z

Update: There's a PR in the works that fixes this issue: #180.

If you need it earlier, install from branch (or fork and link):

npm i pmndrs/react-postprocessing#react-18-last-pp-last-three # npm
yarn add pmndrs/react-postprocessing#react-18-last-pp-last-three # yarn
pnpm i pmndrs/react-postprocessing#react-18-last-pp-last-three #pnpm

Exhaustive testing in progress, but I've verified it builds using the r3f starter / postprocessing demo. (Above issue does not occur)

Kelier · 2023-04-24T03:25:05Z

I used the 'use client' declaration for a component, but the issue still persists when building it.

marklundin · 2023-04-25T19:02:59Z

Was there an issue opened with next.js for this @z-dmgy ?

CodyJasonBennett · 2023-04-26T09:44:33Z

I left a review since that PR was defunct in making this library ESM-only. I'd create an issue in Next.js if possible, it's not the fault of the Node ecosystem if it can't work with its resolution algorithm.

z-dmgy · 2023-04-26T10:52:50Z

@marklundin
Sorry, when I went back later, I used the "page" directory and it worked fine, so I didn't do that.

0xIchigo · 2023-05-17T05:01:25Z

Any updates on this issue @drewxs ? I saw that #180 was merged however I am still getting this issue with my Next.js project. I'm using the app directory and version 13.4.2 for next, and I've tried changing the different versions for next, three, and postprocessing but I still get this issue.

Should I just switch to using the page directory in place of the app directory?

CodyJasonBennett · 2023-05-17T10:03:14Z

I can only guess that the app dir is using a compiler which doesn't like wrapped require in UMD builds, coincidentally worked around when ESM prior, which should be brought up in Next.js. First, I'd try disabling SSR when importing this library via next/dynamic to see if that gives a similar effect.

0xIchigo · 2023-05-17T17:36:24Z

Hey @CodyJasonBennett I appreciate the quick response. Sorry, but exactly how would I do that? Would I only lazy load in the library or would I have to wrap the whole component in a wrapper with SSR disabled?

For context, SpaceWarp.tsx is imported into my Background component, which wraps SpaceWarp in a HTMLCanvasElement. This is what SpaceWarp.tsx looks like

And this is what's printed in the terminal:

warn ./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/postprocessing.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/.pnpm/[email protected][email protected]/node_modules/postprocessing/build/postprocessing.js
./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/screen-space-reflections/dist/index.cjs
./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@react-three/postprocessing/dist/index.js
./app/components/SpaceWarp.tsx
./app/components/Background.tsx

    at __webpack_require__ (E:\0xIchigoWebsite\0xichigo-website\.next\server\webpack-runtime.js:33:43)
    at eval (./app/components/SpaceWarp.tsx:11:85)
    at (sc_client)/./app/components/SpaceWarp.tsx (E:\0xIchigoWebsite\0xichigo-website\.next\server\app\page.js:4071:1)
    at __webpack_require__ (E:\0xIchigoWebsite\0xichigo-website\.next\server\webpack-runtime.js:33:43)
    at eval (./app/components/Background.tsx:11:68)
    at (sc_client)/./app/components/Background.tsx (E:\0xIchigoWebsite\0xichigo-website\.next\server\app\page.js:4049:1)
    at __webpack_require__ (E:\0xIchigoWebsite\0xichigo-website\.next\server\webpack-runtime.js:33:43)

far0s · 2023-05-25T13:27:11Z

Hi @CodyJasonBennett, just tried the solution you proposed, no success, seems like PostProcessing is just returning undefined when loading through next/dynamic.

Here is my code snippet, it's inside a client component:

// import @react-three/postprocessing library via next/dynamic and disable SSR
const PostProcessing = dynamic(
  () =>
    import('@react-three/postprocessing').then(mod => ({
      default: mod,
    })),
  {
    ssr: false,
  }
);

Console warning:
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

nextjs: 13.4.3
three: 0.152.2
@react-three/postprocessing: 2.13.0

0xIchigo · 2023-05-25T17:17:52Z

Hey @far0s! I had also tried the lazy-loading solution to no avail, however I was able to find a work-around: I put a "use client"; declaration at the top of the module which used the component, as well as imported the component using next/dynamic and my errors went away.

far0s · 2023-05-26T13:33:15Z

Hey @far0s! I had also tried the lazy-loading solution to no avail, however I was able to find a work-around: I put a "use client"; declaration at the top of the module which used the component, as well as imported the component using next/dynamic and my errors went away.

@0xIchigo oh I should have made it clearer but yeah I also have 'use client'; at the top of my file. It does make me wonder if my problem lies elsewhere then 🤔

alessiogmonti · 2023-06-02T21:48:55Z

Also running into this issue, and like @far0s I have 'use client' and dynamic load doesn't work (my model ends up being "meshnormal" colored). Perhaps its just not working for the DepthOfField effect, so I will update when I know more.

skuteli · 2023-06-07T10:28:22Z

I successfully went around this issue by importing dynamically a parent component.

"use client" 

const MyComponentThatImportsPostprocessing = dynamic(
  () => import('./Components/MyComponentThatImportsPostprocessing'), {
    loading: () => <p>Dynamically loading my canvas component...</p>,
});

....

<MyComponentThatImportsPostprocessing/>

DorPlaut · 2023-06-09T22:19:35Z

I successfully went around this issue by importing dynamically a parent component.

"use client" 

const MyComponentThatImportsPostprocessing = dynamic(
  () => import('./Components/MyComponentThatImportsPostprocessing'), {
    loading: () => <p>Dynamically loading my canvas component...</p>,
});

....

<MyComponentThatImportsPostprocessing/>

Thanks. Work for me to. But i still get this message :
Import trace for requested module:
./node_modules/@react-three/postprocessing/node_modules/postprocessing/build/postprocessing.js
./node_modules/@react-three/postprocessing/node_modules/screen-space-reflections/dist/index.cjs
./node_modules/@react-three/postprocessing/dist/index.js
./src/components/three/PostProcessing.js
./src/components/three/ThreeScene.js
./src/app/page.js

swaggymarie · 2023-06-10T18:20:13Z

I successfully went around this issue by importing dynamically a parent component.

"use client" 

const MyComponentThatImportsPostprocessing = dynamic(
  () => import('./Components/MyComponentThatImportsPostprocessing'), {
    loading: () => <p>Dynamically loading my canvas component...</p>,
});

....

<MyComponentThatImportsPostprocessing/>

This wasnt working for me as well, but fixed using

const MyComponentThatImportsPostprocessing = dynamic(
() => import('./Components/MyComponentThatImportsPostprocessing').then((mod) => mod.MyComponentThatImportsPostprocessing),
{ loading: () => <p>Dynamically loading my canvas component...</p>, ssr: false }
);

CodyJasonBennett · 2023-06-10T19:03:40Z

For anyone still encountering this issue, see the above workarounds or https://npmjs.com/umd-compat-loader, but I'd continue this in Next.js since it's not supporting UMD builds with wrapped require.

talentlessguy closed this as completed Dec 27, 2022

Error: Cannot find module 'three' #168

Error: Cannot find module 'three' #168

Comments

z-dmgy commented Dec 13, 2022

drewxs commented Dec 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

z-dmgy commented Dec 24, 2022

Uh oh!

drewxs commented Dec 27, 2022

Uh oh!

z-dmgy commented Dec 27, 2022

Uh oh!

talentlessguy commented Dec 27, 2022

Uh oh!

z-dmgy commented Dec 27, 2022

Uh oh!

fabioalcocer commented Mar 9, 2023

Uh oh!

paralin commented Mar 10, 2023

Uh oh!

z-dmgy commented Mar 10, 2023

Uh oh!

ahulterstrom commented Apr 20, 2023

Uh oh!

QuentinMerabet commented Apr 21, 2023

Uh oh!

drewxs commented Apr 22, 2023

Uh oh!

Kelier commented Apr 24, 2023

Uh oh!

marklundin commented Apr 25, 2023

Uh oh!

CodyJasonBennett commented Apr 26, 2023

Uh oh!

z-dmgy commented Apr 26, 2023

Uh oh!

0xIchigo commented May 17, 2023

Uh oh!

CodyJasonBennett commented May 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

0xIchigo commented May 17, 2023

Uh oh!

far0s commented May 25, 2023

Uh oh!

0xIchigo commented May 25, 2023

Uh oh!

far0s commented May 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alessiogmonti commented Jun 2, 2023

Uh oh!

skuteli commented Jun 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DorPlaut commented Jun 9, 2023

Uh oh!

swaggymarie commented Jun 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CodyJasonBennett commented Jun 10, 2023

Uh oh!

drewxs commented Dec 21, 2022 •

edited

Loading

CodyJasonBennett commented May 17, 2023 •

edited

Loading

far0s commented May 26, 2023 •

edited

Loading

skuteli commented Jun 7, 2023 •

edited

Loading

swaggymarie commented Jun 10, 2023 •

edited

Loading