在 Chrome 开发者工具中，以任何方式包括空格编辑 React JavaScript 文件都会导致未捕获的语法错误

首先，我知道我正在尝试做的事情是可能的，因为我正在观看某人在没有错误的情况下完成的视频。

我正在尝试调试一个非常简单的 React 文件。该文件的作用完全无关，因为我正在 Chrome 中测试调试。我不会以任何方式测试编写 React、JavaScript、HTML、CSS 或任何其他类型的代码。我不想实现任何需要帮助或建议的功能。

我有一个非常简单的 React 文件，它所在的 React 项目的设置和配置根本没有被编辑。每当我更改 Chrome 开发者工具中“源”选项卡中的任何内容时，即使是空格或注释，我都会在第一行导入页面顶部的 Chrome 开发者工具中收到错误消息。

该行本身是 import React,{ Component } from 'react';，该行的错误是 Uncaught SyntaxError: Cannot use import statement outside a module

我已经用其他 React 组件 JavaScript 文件对此进行了测试，它们在第一行导入时都出现了相同的错误。

是的，该页面确实可以正常工作，而且我添加的简单数量的功能仍然有效。但是，由于该错误，我无法在开发人员工具中测试文件中的更改，也无法使用任何断点进行调试或其他任何操作。

是的，我知道我仍然可以在我的 IDE 中编辑文件并使更改生效。不，那不是我想做的。我希望能够使用 Chrome 开发者工具添加断点和调试。

在我正在观看的视频中，演示者能够进行简单的编辑并让它们很好地显示在页面上。当我使用他的文件并完全按照他在屏幕上执行的操作时，我仍然遇到上面提到的错误。

是的，我有 React Developer Tools 扩展。不，它不能解决我的问题。不，卸载扩展不能解决问题。是的，在我安装扩展之前问题就存在。是的，我确实关闭了每个 chrome 窗口并重新打开了 chrome 以确保一切正常。是的，我启用了 JavaScript 源映射。