Cannot run debbuger with breakpoints on WebStorm

Question

I set few breakpoints in this project in WebStorm:

https://codesandbox.io/s/l4jjvzmp47

to see how it works, do yourself a code review. It's normally compiling with yarn start but I can't 'run' or 'debug' either from WS. It throws me error:

import React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:983:16)
    at Module._compile (internal/modules/cjs/loader.js:1033:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103:10)
    at Module.load (internal/modules/cjs/loader.js:914:32)
    at Function.Module._load (internal/modules/cjs/loader.js:822:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1143:12)
    at internal/main/run_main_module.js:16:11

Process finished with exit code 1

I tried to set up Babel in WS but it seems like it already is so propably I can't deliver path properly. Just how to make it run, debuggable with breakpoints?

Answer 1

From the error message is seems that you are trying to run your React component with Node.js (by right-clicking .js file and choosing Debug from its right-click menu?). React applications are normally executed in browser, this is a client-side code written in ES6 + JSX, it can't be executed by Node.js that neither supports this syntax natively nor includes the API for running it. You have to build your application and start the server it is hosted on using react-scripts start , and then debug it in browser using JavaScript Debug run configuration.

Please see https://www.jetbrains.com/help/webstorm/2019.2/react.html#react_running_and_debugging and https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/ for more information about debugging React apps

Answer 2

Imports like "import" not working with nodejs. If you want to debug your application - do it in browser window. You can type debugger; inside your function or method where you need it and refresh browser page.