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

时间:2019-02-05 23:35:11

标签: reactjs netlify parceljs

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

我一直将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"
  }
}

1 个答案:

答案 0 :(得分:0)

项目中缺少reactreact-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