安装后新的 React 应用程序无法立即编译答案

【问题标题】：New React app failed to compile immediatly following install安装后新的 React 应用程序无法立即编译
【发布时间】：2021-05-13 14:00:33
【问题描述】：

我使用 React Native 已经有一段时间了，但我想我会在 Web 上试用 React。所以我遵循了这个指南：https://reactjs.org/docs/create-a-new-react-app.html，但在使用 npx create-react-app react-try 之后，导航到新文件夹，然后输入 yarn start 我收到以下错误消息：

Failed to compile.

./src/index.js 1:60
Module parse failed: Unexpected token (1:60)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> $RefreshRuntime$ = require('C:/Users/e096752/Documents/Cole's Git Repos/react-try/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);

这是 create 方法中包含的所有内容： Project

Package.json

{
  "name": "react-try",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

如果您需要任何其他信息，请告诉我。我到底需要做什么？

【问题讨论】：

标签： reactjs npm create-react-app yarnpkg

【解决方案1】：

似乎有问题反应脚本 4.0.2。一种解决方法是将 package.json 上的版本手动更改为 4.0.1，然后运行 yarn install。这样就可以了！

【讨论】：

这实际上正是我所做的。我本来想删除这个问题，但忘记了。感谢您的回答，尽管现在其他人可以看到它。
与“react-scripts”相同的问题：“4.0.3”。使用“react-scripts”：“4.0.1”，它可以工作！

【解决方案2】：

由于文件夹名称中的单引号，我遇到了这个问题，删除它解决了这个问题。

【讨论】：

【解决方案3】：

package.json -> 在“react-scripts”中将版本更改为 4.0.1：“4.0.1” ->再次运行 npm install

【讨论】：

【解决方案4】：

当您的源文件 URL 中的一个或多个目录带有撇号时，加载程序通常会发生这种情况。

在我自己的情况下；

$ react-scripts start 编译失败。

./src/index.js 1:43 模块解析失败：意外令牌 (1:43) 文件用这些加载器处理： ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js你可能需要额外的加载器来处理这些加载器的结果。> $RefreshRuntime$ = require('C:/Users/PETER'S/PROJECTS/REACT APPS/EGAS/egas/node_modules/react-refresh/runtime.js');| $RefreshSetup$(module.id);

您可以通过打开此文件快速解决此问题；

"*项目根目录*\node_modules@pmmmwh\react-refresh-webpack-plugin\loader\RefreshModule.runtime.js"

然后改变这一行；

$RefreshRuntime$ = require('$RefreshRuntimePath$');

到等效的绝对 URL（在我的例子中）；

$RefreshRuntime$ = require("C:/Users/PETER'S/PROJECTS/REACT APPS/project-root/node_modules/react-refresh/runtime.js");

【讨论】：

我认为您不应该在node_modules 中编辑任何内容。您将在下次安装时丢失它。

【解决方案5】：

刚看了终端日志，问题就解决了：

删除项目文件夹中的 package-lock.json（不是 package.json！）和/或 yarn.lock。
删除项目文件夹中的 node_modules。
从项目文件夹中 package.json 文件中的依赖项和/或 devDependencies 中删除“babel-loader”。
运行 npm install 或 yarn，具体取决于您使用的包管理器。

【讨论】：

【解决方案6】：

我在 npm 命令下面使用了这个。我摆脱了这个问题。让我们试试这个
npm link

【讨论】：

【解决方案7】：

如果您的文件夹名称带有引号，例如 sample'app / "sample app"，删除那些引号或删除文件夹并首先创建应用程序反应应用程序。

【讨论】：

【解决方案8】：

是的，更改 package.json 文件中的 "react-scripts": "4.0.2" -> "react-scripts": "4.0.1" 有效。 “react-scripts”也是如此：“4.0.3”->“react-scripts”：“4.0.1”

【讨论】：

欢迎来到 StackOverflow！重复另一个答案没有帮助（在这种情况下，@fabiangamboa95's）。尝试回答一个未回答的问题。 :-)