Failed to compile on Next.js about react-postprocessing

[talentlessguy]

Should work with:

"@react-three/fiber": "^6.0.1",
"@react-three/postprocessing": "^2.0.1",
"next": "^10.1.2",
"postprocessing": "^6.21.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"three": "^0.127.0"

@kyleawayan @nathanbabcock @vinkovsky @sargunv @MichalPrzybys-TomTom @marcelmusiol lmk if the issue is still present

[ZowieTao]

In the Next.js 13 project, global server-side rendering (SSG) is enabled by default, and the component is for client-side rendering (CSR) effects and cannot be processed during server-side rendering. This can cause build errors. To fix this, you can move the code that uses the component into a client-rendered environment to ensure that it is only executed on the client side.

const DepthOfField = dynamic(
  () =>
    import("@react-three/postprocessing").then((module) => module.DepthOfField),
  {
    ssr: false,
  },
)
const EffectComposer = dynamic(
  () =>
    import("@react-three/postprocessing").then(
      (module) => module.EffectComposer,
    ),
  {
    ssr: false,
  },
)

[sargunv]

I'm using CRA, not Next, but I had a similar error and was able to resolve it by adding this Babel plugin: @babel/plugin-proposal-optional-chaining. A quick look at the index.js file in the tarball shows optional chaining is being used in a couple spots.

[kyleawayan]

Using code from Effects.js from https://codesandbox.io/embed/r3f-game-i2160 for now

[nathanbabcock]

I'm getting the same error

[mfanuzzi]

Fails on Gatsby as well. Presumably it's an issue with SSG; eg using window without checking for its existence.

As such, the same approach applies for other modules that do this: use Loadable Components.

This is something the developers should fix, but this works until then.

[vinkovsky]

Same here

[MichalPrzybys-TomTom]

As suggested here webpack/webpack#10227, there is a workaround - you can add resolutions with acorn 8.x to your package.json.

[marcelmusiol]

Did anyone find a working solution for Nextjs? I tried adding adding resolutions with acorn 8.x to package.json and using the @babel/plugin-proposal-optional-chaining plugin, but no success so far.

Edit: Found a solution: vercel/next.js#20363 (comment)
Add next.config.js to the root directory and add:

module.exports = {
  future: { webpack5: true }
}

[denkravchu]

still the same error with nuxt js

[drcmda]

still the same error with nuxt js

is it latest? can you go back a few versions, at least before ssr was merged? maybe it's that.

[williaster]

I still get this error with latest everything:

"@react-three/drei": "^9.17.0",
"@react-three/fiber": "^8.0.27",
"@react-three/postprocessing": "^2.4.6",
"next": "12.2.1",
"postprocessing": "^6.28.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"three": "^0.142.0"

also tried adding next-transpile-modules to transpile the build node_modules but no dice.

error - /Users/christopher-williams/dev/r3f-spaceship/node_modules/postprocessing/build/postprocessing.js:1405
      this.fragmentShader = effect_default.replace(EffectShaderSection.FRAGMENT_HEAD, shaderParts.get(EffectShaderSection.FRAGMENT_HEAD) ?? "").replace(EffectShaderSection.FRAGMENT_MAIN_UV, shaderParts.get(EffectShaderSection.FRAGMENT_MAIN_UV) ?? "").replace(EffectShaderSection.FRAGMENT_MAIN_IMAGE, shaderParts.get(EffectShaderSection.FRAGMENT_MAIN_IMAGE) ?? "");
                                                                                                                                          ^

SyntaxError: Unexpected token '?'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/christopher-williams/dev/r3f-spaceship/node_modules/@react-three/postprocessing/dist/index.cjs:5:22)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) {
  page: '/'
}

[K-JAX]

On the off chance this helps anybody who finds their way here - I got this error when I tried to use the code from the r3f docs page for Depth of Field not understanding that in order to use the DepthOfField component, it must be placed in the EffectComposer component as stated in the react-postprocessing README.
TLDR In other words, my fix was:

<Canvas>
    {/* The rest of your scene */}
    <EffectComposer>
        <DepthOfField />
    </EffectComposer>
</Canvas>