search

expo / expo-three

Utilities for using THREE.js on Expo
MIT License
752 stars 92 forks source link

WARNING: Multiple instances of Three.js being imported #274

Open iguversedev opened 2 years ago

iguversedev commented 2 years ago

Hello, I have a setup expo-tree, expo 46.0.0, THREE v0.127 and I get this warning in the console. Any ideas how to fix this?

WARNING: Multiple instances of Three.js being imported.
at node_modules/ignore-warnings/lib/index.js:45:13 in console.type
at node_modules/expo-three/build/suppressWarnings.native.js:14:19 in global.console.warn
at node_modules/three/build/three.module.js:49178:2 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at node_modules/three/examples/jsm/loaders/ColladaLoader.js:1:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at node_modules/expo-three/build/loaders/loadModelsAsync.js:4:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at node_modules/expo-three/build/loadAsync.js:3:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at node_modules/expo-three/build/ExpoTHREE.js:5:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at node_modules/expo-three/build/index.js:6:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at screens/TabBar/Play/PlayToEarn/components/WebGLContainer/WebGl.tsx:3:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at screens/TabBar/Play/PlayToEarn/screens/PlayToEarnProgress.tsx:22:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at navigation/stacks/PlayToEarnStack.tsx:5:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at navigation/index.tsx:38:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at App.tsx:24:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at node_modules/expo/AppEntry.js:3:0 in <global>
at node_modules/metro-runtime/src/polyfills/require.js:339:11 in loadModuleImplementation
at node_modules/metro-runtime/src/polyfills/require.js:200:44 in guardedLoadModule
madam97 commented 2 years ago

I got the same warning with TypeError: element.setAttribute is not a function. (In 'element.setAttribute(eventName, 'return;')', 'element.setAttribute' is undefined) error.

package.json

{
  "name": "rpg",
  "version": "1.0.0",
  "main": "AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~46.0.13",
    "expo-gl": "^11.4.0",
    "expo-status-bar": "~1.4.0",
    "expo-three": "^6.2.0",
    "expo-updates": "~0.14.6",
    "react": "18.0.0",
    "react-dom": "^18.0.0",
    "react-native": "0.69.6",
    "react-native-web": "^0.18.9",
    "three": "^0.127.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~18.0.14",
    "@types/react-native": "~0.69.1",
    "@types/three": "^0.127.1",
    "babel-plugin-react-native-web": "^0.18.9",
    "typescript": "~4.3.5"
  },
  "private": true
}

Metro console warning and errors

WARNING: Multiple instances of Three.js being imported.
at node_modules\expo\build\environment\react-native-logs.fx.js:null in warn
at node_modules\expo-three\build\suppressWarnings.native.js:null in global.console.warn
at node_modules\three\build\three.module.js:null in <global>
at node_modules\metro-runtime\src\polyfills\require.js:null in loadModuleImplementation
at node_modules\three\examples\jsm\loaders\ColladaLoader.js:null in <global>
at node_modules\metro-runtime\src\polyfills\require.js:null in loadModuleImplementation
at node_modules\expo-three\build\loaders\loadModelsAsync.js:null in <global>
at node_modules\metro-runtime\src\polyfills\require.js:null in loadModuleImplementation
at node_modules\expo-three\build\loadAsync.js:null in <global>
at node_modules\metro-runtime\src\polyfills\require.js:null in loadModuleImplementation
at node_modules\expo-three\build\ExpoTHREE.js:null in <global>
at node_modules\metro-runtime\src\polyfills\require.js:null in loadModuleImplementation
at node_modules\expo-three\build\index.js:null in <global>
at node_modules\metro-runtime\src\polyfills\require.js:null in loadModuleImplementation
at src\components\Canvas.tsx:null in <global>
at node_modules\metro-runtime\src\polyfills\require.js:null in loadModuleImplementation
at src\App.tsx:null in <global>
at node_modules\metro-runtime\src\polyfills\require.js:null in loadModuleImplementation
at AppEntry.js:null in <global>
at node_modules\metro-runtime\src\polyfills\require.js:null in loadModuleImplementation
at node_modules\metro-runtime\src\polyfills\require.js:null in guardedLoadModule
at http://192.168.0.103:19000/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:null in global code

TypeError: element.setAttribute is not a function. (In 'element.setAttribute(eventName, 'return;')', 'element.setAttribute' is undefined)
at node_modules\expo\build\environment\react-native-logs.fx.js:null in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:null in handleError
at node_modules\expo\build\errors\ExpoErrorManager.js:null in errorHandler
at node_modules\expo\build\errors\ExpoErrorManager.js:null in <anonymous>
at node_modules\@react-native\polyfills\error-guard.js:null in ErrorUtils.reportFatalError
at node_modules\metro-runtime\src\polyfills\require.js:null in guardedLoadModule
at http://192.168.0.103:19000/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:null in global code

Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
at node_modules\expo\build\environment\react-native-logs.fx.js:null in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:null in handleError
at node_modules\expo\build\errors\ExpoErrorManager.js:null in errorHandler
at node_modules\expo\build\errors\ExpoErrorManager.js:null in <anonymous>
at node_modules\@react-native\polyfills\error-guard.js:null in ErrorUtils.reportFatalError
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in callFunctionReturnFlushedQueue
iguversedev commented 2 years ago

@madam97 Were you able to find the solution ?

iguversedev commented 2 years ago

Maybe its somehow connected to this from official docs?


Due to some issues with the Metro bundler you may need to manually define the global instance of Three.js. This is important because three.js doesn't fully use ECMAScript but rather mutates a single global instance of THREE with side-effects.

global.THREE = global.THREE || THREE;

However weren't sure where to add this and it didn't helped me

madam97 commented 2 years ago

Maybe its somehow connected to this from official docs?


Due to some issues with the Metro bundler you may need to manually define the global instance of Three.js. This is important because three.js doesn't fully use ECMAScript but rather mutates a single global instance of THREE with side-effects.

global.THREE = global.THREE || THREE;

However weren't sure where to add this and it didn't helped me

I haven't been able to solve this problem yet, but if I will find the solution, I will write it down here.

I'm using TypeScript so I needed to add global.THREE = global.THREE || THREE; line into src/global.d.ts file, but this doesn't solve the problem.

EDIT: I moved the global.THREE = global.THREE || THREE; line into my App.tsx, but it still doesn't work.

iguversedev commented 2 years ago

Wasn't able to find the solution too