3

I am a new developer who just got into Node and React so scratching my head with this issue. I have googled for over 5 hours today and have exhausted every single solution that was proposed here and on GitHub but cannot resolve my issue so turning to asking a new question.

I am using Heroku to deploy a Node/React app and I keep seeing this error message:

9:22:22 PM web.1 |  /Users/Captain_Kirk/Desktop/StarterApp/index.js:1
9:22:22 PM web.1 |  (function (exports, require, module, __filename, __dirname) { import React, { Component } from 'react';
9:22:22 PM web.1 |                                                                ^^^^^^
9:22:22 PM web.1 |  SyntaxError: Unexpected token import
9:22:22 PM web.1 |      at new Script (vm.js:51:7)
9:22:22 PM web.1 |      at createScript (vm.js:136:10)
9:22:22 PM web.1 |      at Object.runInThisContext (vm.js:197:10)
9:22:22 PM web.1 |      at Module._compile (module.js:613:28)
9:22:22 PM web.1 |      at Object.Module._extensions..js (module.js:660:10)
9:22:22 PM web.1 |      at Module.load (module.js:561:32)
9:22:22 PM web.1 |      at tryModuleLoad (module.js:501:12)
9:22:22 PM web.1 |      at Function.Module._load (module.js:493:3)
9:22:22 PM web.1 |      at Function.Module.runMain (module.js:690:10)
9:22:22 PM web.1 |      at startup (bootstrap_node.js:194:16)
9:22:22 PM web.1 Exited with exit code 1

And here is my package.json file:

{
  "name": "StarterApp",
  "version": "1.0.0",
  "description": "test app",
  "engines": {
    "node": "9.8.0"
  },
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "fs-extra": "^5.0.0",
    "ganache-cli": "^6.1.0",
    "mocha": "^5.0.5",
    "next": "^4.1.4",
    "next-routes": "^1.4.1",
    "npm": "^6.1.0",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "semantic-ui-css": "^2.3.1",
    "semantic-ui-react": "^0.79.1",
    "solc": "^0.4.21",
    "truffle-hdwallet-provider": "0.0.3",
    "web3": "^1.0.0-beta.26",
    "webpack-cli": "^2.0.13"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "webpack": "^3.12.0"
  },
  "directories": {
    "test": "test"
  }
}

When I run 'npm install' I see the following warnings:

npm WARN deprecated [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 

^ I seem to already have the right preset so not sure why this warning is showing up.

Other npm warning:

npm WARN deprecated [email protected]: Package no longer supported. Contact [email protected] for more info.
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.

What am I doing wrong here?

4
  • What do you think SyntaxError: Unexpected token import means? Commented Jun 20, 2018 at 1:45
  • @Nick I think it means that it can't understand what 'import' means and that's likely because the current version of Node doesn't work with ES6 declarations. Thoughts? Commented Jun 20, 2018 at 2:45
  • 1
    Yep, but you have webpack and babel to take care of that, so how are those configured? Commented Jun 20, 2018 at 14:08
  • After much debugging I just decided to re-write the app and then it worked. So strange. Embarrassed that I couldn't debug it and had to re-write it :( Commented Jun 20, 2018 at 22:04

2 Answers 2

2

Since you are using React, it is recommended that you add 'babel-preset-react' to your dev dependencies.

You can read more about the module here: https://www.npmjs.com/package/babel-preset-react

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks! As crazy as it sounds, I have been debugging it for a few hours so just re-did the app from scratch and this time it solved the problem.
1

Node doesn't allow to use Express keyword import instead it uses require as a replacement of import.

Hope it may work for you.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.