如何识别导致 Cypress Webpack 编译错误的文件：“意外字符 �”[已关闭]

Question

我最近将

react-scripts

Web 应用程序从 React 17 迁移到 18。该应用程序运行正常，包括 Cypress 组件测试，但 Cypress E2E 测试因 Webpack 编译错误而失败。迁移之前一切正常，但我不确定如何确定问题的根源。

错误信息：

Error: Webpack Compilation Error
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

我想要实现的目标：

• 我需要找到导致此错误的文件或资源。错误信息没有提供文件路径，导致调试困难。

所需的错误消息（带有文件路径）：

Module parse failed: Unexpected character '�' (1:0) in file './path/file.extension'

我尝试过的：

• 在网上广泛搜索解决方案，但找不到解决方案。
• 将此应用程序与非常相似的网络应用程序（相同的依赖项、共享文件和测试设置）进行比较，后者不会引发此错误。
• 尝试在新的应用程序中重现该问题，但错误并未发生。
• 使用 DEBUG=cypress:* npm run cypress-e2e 进行测试，但它没有提供任何其他有用的信息。
• 检查了所有导入，删除或禁用了一些可疑导入，但仍然遇到错误。
• 删除了其他工作应用程序中未找到的依赖项——没有变化。
• 检查了迁移过程中修改的所有 137 个文件，以确保没有添加可能导致此问题的二进制文件。

问题： 如何让 Cypress 或 Webpack 显示导致此错误的文件路径？如果没有文件路径，就很难调试或确定哪个二进制文件或不受支持的文件被错误解析。

其他背景：

• 两个应用程序都使用反应脚本并具有类似的设置，但只有这个会抛出错误。
• 由于需要投入大量时间并且需要迁移到新的 UI 库以兼容 React 18，因此重新进行迁移是不可行的。

任何有关如何追踪导致此问题的文件的建议将不胜感激。

Answer 1

我的猜测是，您在新文件中复制/粘贴了具有不同编码的文本，将该文件的编码设置为与通常不同的编码。

我的建议是检查所有文件，看看项目中每个文件的编码是什么，并查看与其他文件不同的一个。

我在 LMDE 6 上测试了本网站中描述的不同方法：https://www.baeldung.com/linux/detect-text-encoding-automatically
但对我来说，使用

differently_encoded.txt

文件的唯一方法是使用 lib chardet 的 python 脚本。

这就是我所做的：

安装了库：

sudo apt install python3.12-venv
python3 -m venv myenv
source myenv/bin/activate  # Activate the virtual environment
pip install chardet        # Install the package inside the virtual environment

调整脚本以遍历子目录，并将该文件保存到

detect_encoding.py

import chardet
import os

def detect_encoding(file_path):
    try:
        with open(file_path, 'rb') as f:
            chunk = f.read(1024)
            result = chardet.detect(chunk)
            encoding = result['encoding']
            return f'Encoding={encoding}' if encoding else 'Encoding not detected'
    except Exception as e:
        return f'Error: {e}'

# Ask the user for a directory to search
directory_to_search = input("Please enter the directory to search: ")

exclude_directories = set(['build', '.git','node_modules'])    #directory (only names) you want to exclude
for dname, dirs, files in os.walk(directory_to_search):  # Search in the user-specified directory
    dirs[:] = [d for d in dirs if d not in exclude_directories] # exclude directory if in exclude list 
    for fname in files:
       fpath = os.path.join(dname, fname)   #this generate full directory path for file
       # Only show files with non-ASCII encodings and exclude ASCII files explicitly
       if encoding and encoding.lower() not in ['encoding=ascii', 'encoding not detected']:
           print(fpath, ':', detect_encoding(fpath))

启动脚本：

python detect_encoding.py
Or
python3 detect_encoding.py

它给出了这样的结果：

./deploy.sh : Encoding=ascii
./test.py : Encoding=ascii
./.bash_aliases : Encoding=ascii
./.bashrc : Encoding=ascii
./differently_encoded.txt : Encoding=ISO-8859-1
./.inputrc : Encoding=ascii
./README.md : Encoding=utf-8

有罪档案肯定会出现。

之后，只需使用编辑器将文件转换为 utf-8（可能），然后查看哪些字符有问题。 将这些字符替换为“好”字符，就完成了。