reactjs 警告：正在导入Three.js的多个示例

当我尝试在同一个项目中使用@react-three/fiber和@react-three/drei时，收到以下警告。

重现步骤

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

我的src/App.js文件看起来像这样：

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;

要启动应用程序，请运行npm run start。

模块信息

在^0.128.0处three
在^6.0.16处@react-three/fiber
在^4.2.0处@react-three/drei

更新（2021年5月4日）

补充资料

进行了束分析，得到以下结果：

// 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';

对生产版本尝试了相同的操作，但似乎没有重复的three.module.js条目。看起来这只发生在开发中，知道为什么吗？

您在生产环境中看不到该警告的原因是，您可能在生产环境中禁用了这些警告。如果您不使用它，请考虑在应用代码的任何部分包含该标记，并检查StrictMode设置。<Ract.StritMode> tag at any section of your app code and check your StrictMode settings.
更多信息请访问：https://www.knowledgehut.com/blog/web-development/react-strict-mode
关于警告"WARNING: Multiple instances of Three.js being imported."。当网页或应用程序多次导入Three.js库时，通常会显示此警告，这意味着库代码被加载了多次。这可能有几个原因，例如：
1.多个脚本标签：如果您在HTML中使用多个script标记包含Three.js库，则会多次导入。
1.模块捆绑问题：如果您使用Webpack或Rollup之类的捆绑器来捆绑应用程序代码，并且您没有正确配置它，则它可能会多次导入Three.js库。
1.外部依赖性：如果您的应用程序依赖于也导入Three.js的外部依赖项，这可能导致加载库的多个示例。
1.根据我的经验，这是最常见的。拥有Three.js库的多个示例可能会导致内存泄漏、意外行为和性能降低等问题。要避免这些问题，应确保在应用程序中只导入一次库。检查您导入了多少个three.js。要避免由于外部依赖关系而在React应用程序中导入多个Three.js示例，您可以执行以下步骤：
4.1.使用像npm或yarn这样的包管理器来管理你的项目依赖关系。
4.2.检查应用程序的依赖项，看看是否有任何依赖Three.js的应用程序。
4.3.如果您发现任何使用Three.js的依赖项，请查看它们的文档，看看它们是否提供了使用特定版本的Three.js或禁用其内部使用的选项。
4.4.如果没有这样的选项，您可以尝试使用不依赖Three.js的依赖项，或者找到提供类似功能的替代库。
4.5.如果没有替代方案，您可以尝试使用类似"npm-link"或"yarn link"的包将您的应用程序与使用Three.js的依赖项链接起来，并修改其代码以使用您的应用程序已经在使用的Three.js示例。
4.6.最后，如果以上选项都不起作用，那么在大多数情况下，您已经将Three.js导入到多个组件、服务、应用模块或它们的组合中。
4.6.1.尝试在你的应用程序中使用Three.js库的别名，这样外部依赖项也将使用你的应用程序已经使用的库的同一个示例。如果你的代码中存在这种依赖项的多个导入，这应该可以解决警告。如果这是在第三方依赖项的代码中，我不建议更改这样的代码。因为破坏外部库的连续性不是最佳做法。否则，每次安装和/或更新这些库时，您将被迫手动更新这些更改。完全不推荐。
1.另一个选项--也是推荐的--是使用节点包管理器（npm）甚至yarn安装三个类似的类型。在npm中，有两个命令可以正确安装它：

npm install three
npm install @types/three

然后，您应该在tsconfig.app.json的"compilerOptions"设置中添加这些选项，并重新启动编译：

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

请记住，您还可以定义要安装的Three.js版本：
npm install [package-name]@[version-number]
1.最后，检查构建器选项，并在"script"部分包含对three.js模块的引用

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

我希望这能给你一些帮助。

reactjs 警告：正在导入Three.js的多个示例

更新（2021年5月4日）

1条答案

相关问题

热门标签

最新问答