当我尝试在同一个项目中使用@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
条目。看起来这只发生在开发中,知道为什么吗?
1条答案
按热度按时间ugmeyewa1#
您在生产环境中看不到该警告的原因是,您可能在生产环境中禁用了这些警告。如果您不使用它,请考虑在应用代码的任何部分包含该标记,并检查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中,有两个命令可以正确安装它:
然后,您应该在tsconfig.app.json的"compilerOptions"设置中添加这些选项,并重新启动编译:
请记住,您还可以定义要安装的Three.js版本:
npm install [package-name]@[version-number]
1.最后,检查构建器选项,并在"script"部分包含对three.js模块的引用
我希望这能给你一些帮助。