SyntaxError : unexpected token on react project when run/debug
I use webstorm 2017.2.3 payed license.
I make a react project. All configuration of code works fine.
But when I run or debug, IDE throw this error log.
When I run the application on console using npm command, app works fine.
It seems the IDE don't compile 'import' syntax in my opinion.
- This is the error log
```
/usr/local/bin/node --debug-brk=59465 --expose_debug_as=v8debug ~/Development/serverless/standuptutorial/src/index.js
Debugger listening on [::]:59465
~/Development/serverless/standuptutorial/src/index.js:1
(function (exports, require, module, __filename, __dirname) { import React from 'react';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Timeout.Module.runMain [as _onTimeout] (module.js:604:10)
at ontimeout (timers.js:386:14)
at tryOnTimeout (timers.js:250:5)
Process finished with exit code 1
```
- index.js code is below
```
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
```
- This project's package.json is below
{
"name": "standuptutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^7.3.0",
"browserify": "^14.4.0",
"firebase": "^4.2.0",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"react-scripts": "1.0.7"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
- eslint setting file is below
```
{
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"env": {
"es6": true,
"node": true,
"commonjs": true,
"jquery": true,
"browser": true,
"jest": true
},
"plugins": [
"import",
"node",
"promise",
"react",
"standard"
],
"globals": {
"document": false,
"navigator": false,
"window": false
},
"rules": {
"accessor-pairs": "error",
"arrow-spacing": ["error", { "before": true, "after": true }],
"block-spacing": ["error", "always"],
"brace-style": ["error", "1tbs", { "allowSingleLine": true }],
"camelcase": ["error", { "properties": "never" }],
"comma-dangle": ["error", {
"arrays": "never",
"objects": "never",
"imports": "never",
"exports": "never",
"functions": "never"
}],
"comma-spacing": ["error", { "before": false, "after": true }],
"comma-style": ["error", "last"],
"constructor-super": "error",
"curly": ["warn", "multi-line"],
"dot-location": ["error", "property"],
"eol-last": "error",
"eqeqeq": ["warn", "always", { "null": "ignore" }],
"func-call-spacing": ["error", "never"],
"generator-star-spacing": ["error", { "before": true, "after": true }],
"handle-callback-err": ["error", "^(err|error)$" ],
"indent": ["warn", 4, { "SwitchCase": 2 }],
"key-spacing": ["warn", { "beforeColon": false, "afterColon": true }],
"keyword-spacing": ["warn", { "before": true, "after": true }],
"new-cap": ["error", { "newIsCap": true, "capIsNew": false }],
"new-parens": "error",
"no-array-constructor": "error",
"no-caller": "error",
"no-class-assign": "error",
"no-compare-neg-zero": "error",
"no-cond-assign": "error",
"no-const-assign": "error",
"no-constant-condition": ["error", { "checkLoops": false }],
"no-control-regex": "error",
"no-debugger": "error",
"no-delete-var": "error",
"no-dupe-args": "error",
"no-dupe-class-members": "error",
"no-dupe-keys": "error",
"no-duplicate-case": "error",
"no-empty-character-class": "error",
"no-empty-pattern": "error",
"no-eval": "error",
"no-ex-assign": "error",
"no-extend-native": "error",
"no-extra-bind": "error",
"no-extra-boolean-cast": "error",
"no-extra-parens": ["warn", "functions"],
"no-fallthrough": "error",
"no-floating-decimal": "error",
"no-func-assign": "error",
"no-global-assign": "error",
"no-implied-eval": "error",
"no-inner-declarations": ["error", "functions"],
"no-invalid-regexp": "error",
"no-irregular-whitespace": "error",
"no-iterator": "error",
"no-label-var": "error",
"no-labels": ["error", { "allowLoop": false, "allowSwitch": false }],
"no-lone-blocks": "error",
"no-mixed-operators": ["error", {
"groups": [
["==", "!=", "===", "!==", ">", ">=", "<", "<="],
["&&", "||"],
["in", "instanceof"]
],
"allowSamePrecedence": true
}],
"no-mixed-spaces-and-tabs": "error",
"no-multi-spaces": "error",
"no-multi-str": "error",
"no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }],
"no-negated-in-lhs": "error",
"no-new": "error",
"no-new-func": "error",
"no-new-object": "error",
"no-new-require": "error",
"no-new-symbol": "error",
"no-new-wrappers": "error",
"no-obj-calls": "error",
"no-octal": "error",
"no-octal-escape": "error",
"no-path-concat": "error",
"no-proto": "error",
"no-redeclare": "error",
"no-regex-spaces": "error",
"no-return-assign": ["error", "except-parens"],
"no-return-await": "error",
"no-self-assign": "error",
"no-self-compare": "error",
"no-sequences": "error",
"no-shadow-restricted-names": "error",
"no-sparse-arrays": "error",
"no-tabs": "error",
"no-template-curly-in-string": "error",
"no-this-before-super": "error",
"no-throw-literal": "error",
"no-trailing-spaces": "error",
"no-undef": "error",
"no-undef-init": "error",
"no-unexpected-multiline": "error",
"no-unmodified-loop-condition": "error",
"no-unneeded-ternary": ["error", { "defaultAssignment": false }],
"no-unreachable": "error",
"no-unsafe-finally": "error",
"no-unsafe-negation": "error",
"no-unused-expressions": ["warn", { "allowShortCircuit": true, "allowTernary": true, "allowTaggedTemplates": true }],
"no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
"no-use-before-define": ["error", { "functions": false, "classes": false, "variables": false }],
"no-useless-call": "error",
"no-useless-computed-key": "error",
"no-useless-constructor": "error",
"no-useless-escape": "error",
"no-useless-rename": "error",
"no-useless-return": "error",
"no-whitespace-before-property": "warn",
"no-with": "error",
"object-property-newline": ["error", { "allowMultiplePropertiesPerLine": true }],
"one-var": ["error", { "initialized": "never" }],
"operator-linebreak": ["error", "after", { "overrides": { "?": "before", ":": "before" } }],
"padded-blocks": ["error", { "blocks": "never", "switches": "never", "classes": "never" }],
"prefer-promise-reject-errors": "error",
"quotes": ["warn", "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
"rest-spread-spacing": ["error", "never"],
"semi": ["error", "always"],
"semi-spacing": ["error", { "before": false, "after": true }],
"space-before-blocks": ["warn", "always"],
"space-before-function-paren": ["warn", "always"],
"space-in-parens": ["error", "never"],
"space-infix-ops": "warn",
"space-unary-ops": ["warn", { "words": true, "nonwords": false }],
"spaced-comment": ["warn", "always", {
"line": { "markers": ["*package", "!", "/", ","] },
"block": { "balanced": true, "markers": ["*package", "!", ",", ":", "::", "flow-include"], "exceptions": ["*"] }
}],
"symbol-description": "error",
"template-curly-spacing": ["error", "never"],
"template-tag-spacing": ["error", "never"],
"unicode-bom": ["error", "never"],
"use-isnan": "error",
"valid-typeof": ["error", { "requireStringLiterals": true }],
"wrap-iife": ["error", "any", { "functionPrototypeMethods": true }],
"yield-star-spacing": ["error", "both"],
"yoda": ["error", "never"],
"import/export": "error",
"import/first": "off",
"import/no-duplicates": "error",
"import/no-webpack-loader-syntax": "off",
"node/no-deprecated-api": "error",
"node/process-exit-as-throw": "error",
"promise/param-names": "error",
"standard/array-bracket-even-spacing": ["error", "either"],
"standard/computed-property-even-spacing": ["error", "even"],
"standard/no-callback-literal": "error",
"standard/object-curly-even-spacing": ["error", "either"]
}
}
```
- attached capture is my debug setting.

Please sign in to leave a comment.
the error comes from Node.js, not from WebStorm.
Debug in
.jsfile right-click menu starts this file as Node.js application... Whileimportis a part of ES6, it is not supported natively by Node.js (as ES6 modules support is not yet implemented in V8 - see https://bugs.chromium.org/p/v8/issues/detail?id=1569). Browsers don't support ES6 modules as well. So, you have to compile your code with Babel first.What is the reason for running your React client-side ES6 code as a Node.js application? React applications are normally executed by browser, this is a client-side code. And starting page for client application is
.htmlfile, not.js....When not using WebStorm, you know how to run your app - run npm script to build the application and start the server it's hosted on (react-scripts start), then open page in browser. What about trying same steps in Webstorm? Just open NPM tool window from package.json right-click menu (Show NPM scripts command), double-click the start script to run it. Then create a JavaScript Debug run configuration, specify the application URL there, press Debug
Please see https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/ for more information about debugging react apps