Can't import the named export 'AlwaysDepth' from non EcmaScript module (only default export is available)

[abdulrehman1937]

Description of the bug

Started getting this error after postprocessing v6.22.4 was released.

To Reproduce

I am using depth of field effect. I can not run my app. It does not compile.

Expected behaviour

App should compile and run smoothly like before.

Screenshots

Added

Library versions used

• "@react-three/postprocessing": "^2.0.5",

Desktop

• MacOs BigSur 11.5.2
  -Chrome 92.0.4515.159

[Craaftx]

Same issue with
@react-three/postprocessing": "^2.0.5
postprocessing": "6.22.4

Desktop :
Windows 11 21H2
Firefox 91.0.2 (64 bits)

[vanruesc]

Hi, thanks for the report!

What's your node.js version and which bundler are you using? I'd like to reproduce this issue locally.

It looks like postprocessing is being imported as a native ES6 module and transitive imports from three are treated the same way although three is not of type module.

[abdulrehman1937]

Node v v16.5.0
Bundler webpack (using creat-react-app)

[vanruesc]

Mh, I just found this: formatjs/formatjs#1395 & facebook/create-react-app#10356

Looks like CRA simply doesn't support .mjs imports which is a bummer. I changed the extension because it enables blazing fast Ava.js testing without esm.js when importing stuff from postprocessing like Pass in other projects.

I guess I'll change it back to .esm.js for now. I wonder how CRA would react to type: module in package.json.

[vanruesc]

Fixed in postprocessing@6.22.5.

[vanruesc]

@abdulrehman1937 I've changed the bundle name to postprocessing.mjs in postprocessing@6.24.0. This comment suggests that CRA 5.0.0 can now handle .mjs bundles. Let me know if there are any issues!