admin管理员组

文章数量:1391925

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?

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?

• javascript
• reactjs
• three.js
• create-react-app
• react-three-fiber

Share Improve this question Follow edited May 4, 2021 at 17:53 sxkx asked Apr 26, 2021 at 18:24 sxkxsxkx 63266 silver badges1414 bronze badges 3

• This is related to #17482, which should be fixed in r128. – Cody Bennett Commented Apr 26, 2021 at 20:18
• Added relevant module versions, my three module is already on r128. – sxkx Commented Apr 26, 2021 at 20:47
• Same here. r128 does not seem to solve the issue (@react-three/drei: 4.3.2, @react-three/fiber: 6.0.16) – lsrggr Commented Apr 30, 2021 at 11:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./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 mon, 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 ponents, 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 remend 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 reended- is install three like a type, using the Node Package Manager (npm) or even yarn. In npm these are the two mans to install it correctly:

npm install three
npm install @types/three

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

"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.

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"
    }
}

本文标签： javascriptWARNING Multiple instances of Threejs being importedStack Overflow