reactjs - 无法解析节点模块中的 'tty'

Question

我在 ReactJs + 样式组件中遇到这个错误。我该如何解决？

Compiled with problems:

ERROR in ./node_modules/colorette/index.js 1:0-27

Module not found: Error: Can't resolve 'tty' in 'C:\Users\hp\OneDrive\Documents\react projects\disney-plus-clone\node_modules\colorette'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "tty": require.resolve("tty-browserify") }'
    - install 'tty-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "tty": false }

起初我是这样声明我的样式化组件的:

const DropDown = styled.div`
position: relative;
top: 10vh;
left: 100vw;
border: 2px solid yellow`
${ div }:
    border: 2px solid white;

我收到了预期的编译错误，因为 ${} 语法必须在反引号内。

但删除后突然出现“tty”错误。

Answer 1

tty 是一个仅用于 Node.js 的模块，用于管理文本终端(即您的命令行)。它不应在面向浏览器的代码中使用，例如 React 应用程序。

您的文件似乎正在导入 colorette，它专为命令行界面而不是 React 应用程序设计。

确认您的文件未导入 colorette。如果您有第三方依赖项，请检查它们是否也没有使用 colorette。如果出现这种情况，您需要将其删除。

应该忽略安装 tty-browserify 的建议。除非您正在为命令行开发，否则 tty 不应出现在浏览器代码中。