Not able to resolve 'tty' in node module

Question

I am getting this error in ReactJs + styled components. How can I fix it?

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 }

At first I was declaring my styled components as follows:

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

I got a compilation error as expected because ${} syntax had to be inside the backticks.

But after removing that suddenly I got the "tty" error.

Answer 1

tty is a Node.js-only module used to manage text terminals (i.e. your command line). It should not be used in browser-facing code, like React apps.

Your file seems to be importing colorette, which is designed for command line interfaces, not React apps.

Verify that your file does not import colorette. If you have third-party dependencies, check that they do not use colorette as well. If they do, you'll need to remove it.

The recommendation to install tty-browserify should be ignored. Unless you are developing for the command line, tty should not appear in browser code.