./node_modules/@react-three/xr/dist/Controllers.mjs Can't import the named export 'BufferGeometry' from non EcmaScript module (only default export is available)

[cloudyape]

Below is my React Code

import React from 'react';
import { Canvas } from '@react-three/fiber';
import { VRButton, ARButton, XR } from '@react-three/xr';
import { Controllers } from '@react-three/xr';
import {Hands} from '@react-three/xr/dist/Hands.mjs';

function ARScene() {
return (
<>







</>
)
}

export default ARScene;

Below is my Package.json file
{
"name": "jsqwerty",
"version": "0.1.0",
"private": true,
"dependencies": {
"@aws-amplify/ui-react": "^4.2.0",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-regular-svg-icons": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@mui/material": "^5.11.9",
"@react-three/drei": "^9.57.3",
"@react-three/fiber": "^8.9.2",
"@react-three/xr": "^5.4.0",
"@tensorflow-models/handpose": "^0.0.7",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/three": "^0.146.0",
"ar.js": "^2.2.2",
"aws-amplify": "^5.0.5",
"aws-sdk": "^2.1309.0",
"bootstrap": "^5.2.2",
"canvasjs-react-charts": "^1.0.5",
"drei": "^2.2.21",
"handtrackjs": "^0.1.5",
"jquery": "^3.6.1",
"npx": "^10.2.2",
"openai": "^3.1.0",
"popper.js": "^1.16.1",
"react": "^18.2.0",
"react-bootstrap": "^2.6.0",
"react-code-box": "^1.1.2",
"react-dom": "^18.2.0",
"react-linkedin-login-oauth2": "^2.0.1",
"react-linkedin-sdk": "^1.0.12",
"react-scripts": "3.4.1",
"react-scroll-to-top": "^3.0.0",
"react-share-social": "^0.1.55",
"react-simple-pull-to-refresh": "^1.3.3",
"react-spring": "^9.6.1",
"react-syntax-highlighter": "^15.5.0",
"react-three-fiber": "^6.0.13",
"react-web-share": "^2.0.2",
"react-web-share-button": "^1.0.1",
"suneditor": "^2.44.3",
"suneditor-react": "^3.4.1",
"three": "^0.147.0",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"next-transpile-modules": "^10.0.0",
"react-router-dom": "^6.4.3"
}
}

[Do Park]

I am also experiencing the same issue. Adding mjs to webpack support makes it compile but then it shows the call stack error.

[Michael サイトー 中村 Bashurov]

Can you prepare a codesandbox repro?

[Cody Bennett]

This is because ESM is trying to import CJS somewhere, likely because your version of Webpack does not support Node ESM or the .mjs extension.

We can reconfigure this in the library to smoothen compat here. I'll publish a fix momentarily.