时间戳

首页 > 解决方案 > 无法将反应应用程序部署到 Netlify：ReactDOM.render 引发“意外令牌错误”

reactjs - 无法将反应应用程序部署到 Netlify：ReactDOM.render 引发“意外令牌错误”

问题描述

尝试部署 React 应用程序时，Netlify 给了我一个“意外的令牌错误”，这让我发疯。

我一直在使用 Parcel 作为捆绑程序，到目前为止，该应用程序在浏览器中进行测试时能够正常运行，但是它在每次构建尝试时始终失败，并且似乎无法识别文件中的渲染方法或 JSX 语言。我可能正在做一些非常愚蠢的事情。

提前感谢您的帮助！！

这是我的 index.js 似乎引发了错误：

import React from "react";
import { render } from "react-dom";
import App from './components/app';
import "sanitize.css/sanitize.css";

render(<App />, document.getElementById("root"));

错误信息：

10:50:14 PM: Executing user command: npm run build
10:50:15 PM: > DrumMachine@1.0.0 build /opt/build/repo
10:50:15 PM: > parcel build index.html --public-url ./
10:50:17 PM:   /opt/build/repo/index.js:6:7: Unexpected token (6:7)
10:50:17 PM:   4 | import "sanitize.css/sanitize.css";
10:50:17 PM:   5 |
10:50:17 PM: > 6 | render(<App />, document.getElementById("root"));
10:50:17 PM:     |       ^
10:50:17 PM:   7 |
10:50:18 PM: npm ERR! code ELIFECYCLE
10:50:18 PM: npm ERR! errno 1
10:50:18 PM: npm ERR! DrumMachine@1.0.0 build: `parcel build index.html --public-url ./`
10:50:18 PM: npm ERR! Exit status 1

我的 package.json 文件的内容（删除了个人信息）：

{
  "name": "DrumMachine",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest --watch",
    "dev": "parcel index.html",
    "build": "parcel build index.html --public-url ./"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": ",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.13.0",
    "eslint-config-react-minimal": "^1.0.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-react": "^7.12.4",
    "parcel-bundler": "^1.11.0",
    "react-testing-library": "^5.4.4"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    }
  },
  "dependencies": {
    "sanitize.css": "^8.0.0",
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "parcel-bundler": "^1.11.0"
  }
}

标签： reactjsnetlifyparceljs

解决方案

项目中的缺失react和react-dom依赖项。

  "dependencies": {
    "sanitize.css": "^8.0.0",
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "react": "16.8.1",
    "react-dom": "16.8.1",
    "parcel-bundler": "^1.11.0"
  }

利用：npm install react react-dom

注：其他模块有devDependencies重复dependencies

推荐阅读