ReactJS+styled components中'tty'模块解析失败的解决求助

问题背景 #

开发时先是因Styled Components的${}语法错误（写在反引号外部）触发编译错误，修正语法后却遇到webpack无法解析'tty'模块的报错，具体错误信息如下：

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 }

先修正Styled Components的语法错误 #

你的初始代码存在语法问题，${}必须写在styled组件的反引号内部，正确写法示例：

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

  // 嵌套样式的正确写法
  & div {
    border: 2px solid white;
  }
`;

错误的语法可能触发工具链异常加载Node.js核心模块，这是导致'tty'报错的潜在诱因。

解决'tty'模块解析失败的方案 #

方案1：忽略'tty'模块（推荐） #

浏览器环境不需要'tty'（Node.js终端相关模块），直接在webpack配置中忽略它：

• 如果使用Create React App：
  1. 安装craco（用于修改CRA配置而无需eject）：

     npm install @craco/craco --save-dev
     

  2. 在项目根目录创建craco.config.js：

     module.exports = {
       webpack: {
         configure: {
           resolve: {
             fallback: {
               tty: false
             }
           }
         }
       }
     };
     

  3. 修改package.json中的scripts命令：

     "scripts": {
       "start": "craco start",
       "build": "craco build",
       "test": "craco test"
     }
     

• 手动配置webpack：
  在webpack.config.js的resolve.fallback中添加配置：

  module.exports = {
    // 其他webpack配置项
    resolve: {
      fallback: {
        tty: false
      }
    }
  };
  

方案2：安装polyfill（仅当确实需要时使用） #

如果你的项目依赖需要'tty'模块的功能，可安装对应的浏览器polyfill：

1. 安装tty-browserify：

   npm install tty-browserify --save-dev
   

2. 在webpack配置中添加fallback：

   module.exports = {
     resolve: {
       fallback: {
         tty: require.resolve("tty-browserify")
       }
     }
   };
   

内容的提问来源于stack exchange，提问作者Devansh