"no exported member" errors when using NodeNext module/moduleResolution in TypeScript

[bhouston]

I ran into this bug and it took a while to figure out. It turns out that this library (as well as threes-stdlib) are not compatible with "NodeNext" module/moduleResolution, e.g. if you tsconfig.json looks like this:

    "module": "NodeNext",
    "moduleResolution": "NodeNext",

And you try to use this library like this:

Code:

import {
  EffectComposer,
  LensFlare,
  Vignette,
  Bloom,
} from "@react-three/postprocessing";

You will get compile errors via TSC like this:

src/Scene.tsx:11:3 - error TS2305: Module '"@react-three/postprocessing"' has no exported member 'EffectComposer'.
src/Scene.tsx:12:3 - error TS2305: Module '"@react-three/postprocessing"' has no exported member 'LensFlare'.
src/Scene.tsx:13:3 - error TS2305: Module '"@react-three/postprocessing"' has no exported member 'Vignette'.
src/Scene.tsx:14:3 - error TS2305: Module '"@react-three/postprocessing"' has no exported member 'Bloom'.

You can work around the bug by switching your tsconfig.json to something like this instead:

    "module": "ESNext",
    "moduleResolution": "Node",

I suspect there is some way to fix this? But I do not yet know. One clue is that @react-three/fiber and @react-three.drei work properly with these tsconfig.json settings.

[shinebayar-g]

Just lurking here from random Google search. One way to fix this is use extensions in the import path in this library. E.g. import Foo from Bar.js.

Or you can use

 "module": "ES2022",
 "moduleResolution": "bundler",

in your own repo. Please correct me if I'm wrong.