Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
iguversedev opened this issue Oct 1, 2022 · 5 comments
Open

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

iguversedev opened this issue Oct 1, 2022 · 5 comments

Comments

@iguversedev
Copy link

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
Copy link

madam97 commented Oct 4, 2022

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

  • using the ExpoTHREE.Renderer causes the errors
  • Tried to downgrade expo-three and three, but it didn't work, got the same errors.

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
Copy link
Author

@madam97 Were you able to find the solution ?

@iguversedev
Copy link
Author

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
Copy link

madam97 commented Oct 4, 2022 •
edited

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
Copy link
Author

Wasn't able to find the solution too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@madam97 @iguversedev