CODEWITHSUNDEEP
node.jsreactjsintellij-ideawebstorm
Pro
Pro

Reputation: 51

Cannot run a React app with WebStorm

I am totally new to React and I am trying to follow the examples on react official website.

While running the calculator app(index.js) using WebStorm OR intellij idea ultimate

output of npm run start or npm start

And i get this error:

(function (exports, require, module, __filename, __dirname) { import React from 'react';
                                                              ^^^^^^
    SyntaxError: Unexpected token import
        at createScript (vm.js:80:10)
        at Object.runInThisContext (vm.js:139:10)
        at Module._compile (module.js:599:28)
        at Object.Module._extensions..js (module.js:646:10)
        at Module.load (module.js:554:32)
        at tryModuleLoad (module.js:497:12)
        at Function.Module._load (module.js:489:3)
        at Function.Module.runMain (module.js:676:10)
        at startup (bootstrap_node.js:187:16)
        at bootstrap_node.js:608:3

    Process finished with exit code 1

My question is how to run such an app using intellij idea ultimate What i tried:

npm install -g create-react-app
npm install -g eslint
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-core babel-preset-es2015 babel-preset-react
npm install -g eslint babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype

And adding the following to package.json:

"babel": {
  "presets": [ "es2015", "react" ]
}

Or to .babelrc 

{
  "presets": [ "es2015", "react" ]
}

My question is how to run such an app using intellij idea ultimate package.json

{
  "name": "emoji-search",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://ahfarmer.github.io/emoji-search",
  "devDependencies": {
    "gh-pages": "^1.1.0",
    "react-scripts": "^1.0.17"
  },
  "dependencies": {
    "github-fork-ribbon-css": "^0.2.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  },
  "babel": {
    "presets": [ "es2015", "react" ]
  }
}

(My question is how to run such an app using intellij idea ultimate )

Upvotes: 4

Views: 5434

Answers (1)

Vincent D'amour
Vincent D'amour

Reputation: 3903

You can install react-scripts like this npm install --save-dev react-scripts.
Then you will be able to run this command: react-scripts start at the root of your project (where package.json is).

If you don't want to use command, you can follow this tutorial on How to run a React app with Webstorm

Basically, to start a react app, you need to run a command (npm start); If you want to use the webstorm start button, you need to bind it to the command. From this link:

  1. Choose Run | Edit Configuration on the main menu.
  2. Click add on the toolbar and select npm from the pop-up list.
  3. In the Run/Debug Configuration: NPM dialog box that opens, specify the name of the run configuration, the npm command line command to execute, the scripts to run (use blank spaces as separators), the location of the package.json file to retrieve the definitions of the scripts from, and the command line arguments to execute the script with. Specify the location of the Node executable file and the Node.js-specific options to be passed to this executable file, see Node parameters for details.

Upvotes: 4

Related Questions