CJS build in v9.116.0 breaks Next.js projects (TypeError: a is not a function)

[rossyman]

• three version: 0.170.0
• @react-three/fiber version: 8.17.10
• @react-three/drei version: 9.116.0
• node version: 20.10.0
• npm (or yarn) version: 10.2.3 (Also on bun: 1.1.34)

Problem description:

v9.116.0 CJS build breaks Next.js projects. Previously resolved in this discussion: #1544

unhandledRejection: TypeError: a is not a function
    at Object.<anonymous> (/node_modules/@react-three/drei/index.cjs.js:1:8647)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:345:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:294:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)

Relevant code:

Seems to be zustand related code.

@react-three/drei/index.cjs.js:1:8647

v9.115.0 build (Working):

v9.116.0 build (Broken):

Suggested solution:

Downgrade to v9.115.0

[Sonnpm197]

I tried to render in vitest with a component for drei

import {OrbitControls} from "@react-three/drei";
import {Canvas} from "@react-three/fiber";

const FirstTest = () => {
    return (
        <Canvas>
            <OrbitControls />
        </Canvas>
    )
}
export default FirstTest

import {render, screen} from '@testing-library/react'
import FirstTest from './FirstTest.jsx'

test('loads and displays greeting', () => {
    render(<FirstTest />)
})

Also face the same issue, downgrade to 9.115.0 also doesn't work
Any recommendations?

[abernier]

I think it is the same issue we had previously when upgraded to rollup 3: #1570

@CodyJasonBennett can we find a fix and keep rollup4?

Also, why the e2e tests didn't failed, do you know? Could be great to reproduce the issue in the e2e tests, so we don't face it again

[CodyJasonBennett]

We need to revert the upgrade and ensure we have e2e tests that consume CJS before we retry. If we opt out of SSR in Next, then that skips CJS, for instance.

[abernier]

I'm reverting the 63c331f commit in this PR #2200

[abernier]

merged > now releasing a patch version https://github.com/pmndrs/drei/releases/tag/v9.116.1 in few minutes

@rossyman can you then test it is fixed?

[abernier]

@CodyJasonBennett I will try adding a SSR e2e test for cjs

EDIT: #2201

[abernier]

@CodyJasonBennett there is now a cjs e2e test that reproduces @rossyman 's error and makes the previous rollup4 commit fail https://github.com/pmndrs/drei/actions/runs/11877820543/job/33097749021?pr=2201#step:8:798