Stats component not working with the latest update (StatsImpl is not a constructor)

[9inpachi]

• three version: "^0.161.0"
• @react-three/fiber version: "^8.15.16"
• @react-three/drei version: "^9.101.0"
• node version: v18.15.0
• npm (or yarn) version: pnpm 8.14.1

Problem description:

After updating @react-three/drei from v9.97.1 to v9.101.0, the stats component stopped working and threw the following error:

Relevant code:

import { FC } from 'react';
import {
  GizmoHelper,
  GizmoViewcube,
  Stats,
  View,
  ViewProps,
} from '@react-three/drei';
import styles from './visualizer-view.module.css';

export const VisualizerView: FC<ViewProps> = ({ children, ...props }) => (
  <View className={styles.canvas} {...props}>
    <Stats className={styles.stats} />
    {children}
  </View>
);

Suggested solution:

The issue seems to have been introduced with the three.js update to v0.151.0 through #1850. In particular, the change in import syntax for the Stats class seemed to be the root cause.

import StatsImpl from 'stats.js' -> import * as StatsImpl from 'stats.js'

https://github.com/pmndrs/drei/pull/1850/files#diff-49739308cbf61365d9e1da0ff995973345abe032e3445fdf766cca5c2f19cc36R3

Reverting this change back should fix the issue. I explored stats.js code and the export for the Stats class is default, which means that the previous syntax should be the correct one.

I have tested the change locally and it works for me.

[9inpachi]

This seems to be only happening in a vite project. I tried the default create-react-app template that uses webpack and the import seems to work there. There's an open issue in the vite repo, I have added a reproducable example there: vitejs/vite#15851

It'd be great if it's possible to have some sort of workaround in drei in the meantime. I think one possible solution is to import from stats.js using the syntax import StatsImpl from 'stats.js' and ignore the TypeScript error (or else set "allowSyntheticDefaultImports": true in tsconfig). The error was only introduced because @types/stats.js was added as a transitive dependency to the project with the three.js update.

[rickyzhangca]

same here

[9inpachi]

One other alternative is to use new StatsImpl.default() which works in webpack as well as vite: https://stackblitz.com/edit/webpack-webpack-js-org-gnwump?file=src%2Findex.js

[RodrigoHamuy]

In practical terms what's the downside of allowing allowSyntheticDefaultImports?

[9inpachi]

In practical terms what's the downside of allowing allowSyntheticDefaultImports?

I think some bundlers might not work as expected with the library in that case. Kind of like the issue we are facing right now.