0

Netlify is giving me an 'unexpected token error' when trying to deploy a react app, that is driving me crazy.

I've been using Parcel as a bundler, and thus far the app was able to run fine while testing in the browser, however it consistently fails on every build attempt and appears not to recognise the render method or JSX language in the file. I'm probably doing something really silly.

Thanks in advance for any help!!

This is my index.js that appears to throw the error:

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

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

The error message:

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

Contents of my package.json file (removed personal info):

{
  "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"
  }
}
artysidorenko
  • 43
  • 1
  • 5
  • Are you getting this error after running `npm run build` locally? Or is the build failing within Netlify's deployment flow? – warriorpostman Feb 06 '19 at 01:26
  • Sorry for slow response (didn't see the replies). The build fails within Netlify's deployment flow. Subsequently I did manage a workaround by building it locally, and then dumping the dist folder onto netlify manually. That worked fine. – artysidorenko Feb 15 '19 at 11:52
  • I should add: I was importing audio files into my project (creating an Audio object in one of my components, passing a .wav file into it from a local folder) - that's the only unusual piece I think might have been causing errors... not sure though. It's not a pressing matter anymore though, but thanks for your help nonetheless – artysidorenko Feb 15 '19 at 11:54

1 Answers1

0

Missing react and react-dom dependencies in your project.

  "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"
  }

use: npm install react react-dom

Note: There are devDependencies repeated in dependencies for other modules

talves
  • 13,993
  • 5
  • 40
  • 63