Next 13+ EffectComposer Import Error

[ChrisCates]

trafficstars

Hard to debug this stack trace. Not sure what's going on here. Been tinkering with versions but can't seem to get it fixed. Here is the error:

 ⨯ ./node_modules/@react-three/postprocessing/dist/EffectComposer.js
Attempted import error: 'EffectAttribute' is not exported from 'postprocessing' (imported as 'EffectAttribute').

Import trace for requested module:
./node_modules/@react-three/postprocessing/dist/EffectComposer.js
./node_modules/@react-three/postprocessing/dist/index.js
./components/index/concept.tsx

Here are the package.json dependencies:

{
  "dependencies": {
    "@prisma/client": "^5.5.2",
    "@react-spring/three": "9.7.3",
    "@react-three/drei": "9.88.11",
    "@react-three/fiber": "8.15.10",
    "@react-three/postprocessing": "2.15.10",
    "@reduxjs/toolkit": "^1.9.7",
    "@types/three": "0.158.2",
    "iron-session": "8.0.0-alpha.0",
    "maath": "0.10.4",
    "next": "^14.0.1",
    "postprocessing": "6.33.3",
    "prisma": "^5.5.2",
    "react": "^18.2.0",
    "react-calendar": "^4.6.1",
    "react-dom": "^18.2.0",
    "react-icons": "^4.11.0",
    "react-redux": "^8.1.3",
    "sass": "^1.69.5",
    "superagent": "^8.1.2",
    "three": "0.158.0"
  },
  "devDependencies": {
    "@types/node": "^20.9.0",
    "@types/superagent": "^4.1.21",
    "@typescript-eslint/eslint-plugin": "^6.10.0",
    "@typescript-eslint/parser": "^6.10.0",
    "eslint": "^8.53.0",
    "eslint-config-next": "^14.0.1",
    "eslint-config-prettier": "^9.0.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-n": "^16.3.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^5.0.1",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.33.2",
    "node-sass": "^9.0.0",
    "prettier": "^3.0.3",
    "typescript": "^5.2.2"
  }
}

Here is what I'm importing:

import * as THREE from 'three'
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
import { Canvas, useFrame, useLoader } from '@react-three/fiber'
import { BakeShadows } from '@react-three/drei'
import { EffectComposer, GodRays, Bloom } from '@react-three/postprocessing'

And finally versions of my package managers:

$ node --version
v20.9.0

$ npm --version
10.1.0

$ yarn --version
1.22.19

Let me know if you have any feedback and clues on how to fix this! Thank you!

[ChrisCates]

Solved the issue by doing the following:

1. Set the postprocessing library to version 6.32.0

2. Set the three library to version 0.153.0

Keeping open in order to have discussion continue on this topic.

The issue mentioned here on the core postprocessing library. Seems to have been reintroduced in the latest release.

https://github.com/pmndrs/postprocessing/issues/485

[CodyJasonBennett]

What did npm ls postprocessing give you before? This library installs >=6.32.1.

[ChrisCates]

Current package semver.

$ npm ls postprocessing

├─┬ @react-three/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
└── [email protected]

After applying

yarn add postprocessing@latest @react-three/postprocessing@latest

The result is

$ npm ls postprocessing

├─┬ @react-three/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
└── [email protected]