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

如何解决新的 React 应用程序在安装后无法立即编译

我已经使用 React Native 有一段时间了，但我想我会在网络上试用 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"
    ]
  }
}

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

解决方法

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

当源文件 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.jsYou 可能需要一个额外的加载器来处理这些加载器的结果。> $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");

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

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

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

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

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

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