WARNING: Multiple instances of Three.js being imported

Question

I'm getting the following warning when trying to use @react-three/fiber and @react-three/drei in the same project.

Steps to reproduce

npx create-react-app reproduced-warning
cd reproduced-warning
npm install three @react-three/fiber @react-three/drei

My src/App.js file looks like this:

import React from 'react';
import { Canvas } from '@react-three/fiber';
import { Stats } from '@react-three/drei';

import './App.css';

const App = (props) => {
  return (
    <div className="App">
      <Canvas />
    </div>
  );  
};

export default App;

To start the App run npm run start.

Module information

• three at ^0.128.0
• @react-three/fiber at ^6.0.16
• @react-three/drei at ^4.2.0

Updated (4 May 2021)

Additional information

Did a bundle analysis and got the following results:

// Used these imports
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { Stats } from '@react-three/drei';

// Used these imports
import React from 'react';
import { Canvas } from '@react-three/fiber';

Tried the same for the production build but it did not appear to have the duplicate three.module.js entry. It looks like this only happens in development, any idea why?

Separation

This is related to #17482, which should be fixed in r128. – Thiel

Added relevant module versions, my three module is already on r128. – Separation

Same here. r128 does not seem to solve the issue (@react-three/drei: 4.3.2, @react-three/fiber: 6.0.16) – Ovi

Answer 1

The reason why you don't see that warning in production is because, maybe in production you have disabled those warnings. If you are not using it, consider to include the <React.StrictMode> tag at any section of your app code and check your StrictMode settings.

Further info at: https://www.knowledgehut.com/blog/web-development/react-strict-mode

Regarding the warning "WARNING: Multiple instances of Three.js being imported.". This warning is typically shown when a web page or application has imported the Three.js library multiple times, meaning that the library code is being loaded more than once. This can happen for a few reasons, such as:

1. Multiple script tags: If you include the Three.js library in your HTML using multiple script tags, it will be imported more than once.

2. Module bundling issues: If you use a bundler like Webpack or Rollup to bundle your application code, and you have not configured it correctly, it may import the Three.js library multiple times.

3. External dependencies: If your application relies on external dependencies that also import Three.js, this can result in multiple instances of the library being loaded.

4. The most common, in my experience. Having multiple instances of the Three.js library can cause issues such as memory leaks, unexpected behavior, and reduced performance. To avoid these issues, you should ensure that you only import the library once in your application. Check how many imports of three.js you have. To avoid multiple instances of Three.js being imported in a React application due to external dependencies, you can follow these steps:

4.1. Use a package manager like npm or yarn to manage your project dependencies.

4.2. Check the dependencies of your application to see if any of them rely on Three.js.

4.3. If you find any dependencies that use Three.js, check their documentation to see if they provide an option to use a specific version of Three.js or to disable its internal usage.

4.4. If there is no such option, you can try to use a dependency that doesn't rely on Three.js, or find an alternative library that provides similar functionality.

4.5. If there is no alternative available, you can try to use a package like "npm-link" or "yarn link" to link your application with the dependency that uses Three.js, and modify its code to use the Three.js instance that your application is already using.

4.6. Finally, if none of the above options work, in most of the cases you have imported the Three.js in several components, services, app modules, or a mix of them. Then, you should do the the following:

4.6.1. Try to use an alias for the Three.js library in your application, so that external dependencies will also use the same instance of the library that your application is already using. This should resolve the warning in case the multiple importation of such dependency is in your code. If that is in the code of 3rd parties dependencies, I do not recommend to change such code, because it is not a best practice breaking the continuity of external libraries. Otherwise, you will be forced to update those changes manualy, every time those libraries will be installed and/or updated. Tha's not reommended at all.

5. Another option -that is also recomended- is install three like a type, using the Node Package Manager (npm) or even yarn. In npm these are the two commans to install it correctly:

npm install three
npm install @types/three

Then, you should add these options in the "compilerOptions" settings of your tsconfig.app.json and re-launch the compilation:

"typeRoots": ["node_modules/@types"],
"types": ["three"] 

Remember you can also define the version of Three.js you want to install:

npm install [package-name]@[version-number]

6. Finally, check you builder options and include in the "script" section a reference to the three.js module

"scripts": [
  "node_modules/three/build/three.min.js"
]

I hope this will provide you some help.

Diameter

Answer 2

Another strategy to use the same three packages across is with a package manager like pnpm, which allows for overriding. All dependencies can be specified to use the same three sub-dependencies. Simply paste this into your package.json.

"pnpm": {
    "overrides": {
        "three": "^0.167.1"
    }
}

Precept

a part of your answer seems to miss. – Myriammyriameter

@Myriammyriameter Thanks, just updated the last sentence :) – Precept