Node.js SyntaxError: Unexpected identifier when you tried VSCode debugging with ES6 syntax

I’ve used nodemon with ES6 syntax. And there wasn’t any problem on executing and testing.

But, for debugging with the breakpoint. I’d used vscode debugging. And I couldn’t use nodemon in launch.json.

And so, if I use a fundamental ‘node’ execute, I faced the error.

/usr/local/bin/node /Users/fredriccliver/Projects/Speech/server.js
Debugger listening on ws://127.0.0.1:57233/67f458ce-d6ae-43f0-83b1-db8ac5093b7a For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
/Users/fredriccliver/Projects/Speech/server.js:1 import express from "express"        ^^^^^^^  SyntaxError: Unexpected identifier     at Module._compile (internal/modules/cjs/loader.js:723:23)     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)     at Module.load (internal/modules/cjs/loader.js:653:32)     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)     at Function.Module._load (internal/modules/cjs/loader.js:585:3)     at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)     at startup (internal/bootstrap/node.js:283:19)     at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3) Waiting for the debugger to disconnect...
Process exited with code 1

So, I just added an additional entry point, start.js with babel.
I don’t prefer a pre-compiler or bundler. But I could found this article introducing the simplest way.

refer this:
https://timonweb.com/posts/how-to-enable-es6-imports-in-nodejs/

After that, I faced another problem.

Debugger listening on ws://127.0.0.1:61460/6138edad-08a9-442b-86e5-87cc03cd9a3d For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Debugger listening on ws://127.0.0.1:61460/6138edad-08a9-442b-86e5-87cc03cd9a3d For help, see: https://nodejs.org/en/docs/inspector /Users/fredriccliver/Projects/Speech/src/routes/api.js:85   _run = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {                                          ^  ReferenceError: regeneratorRuntime is not defined

After searching, I found this.

https://github.com/babel/babel/issues/8829#issuecomment-456524916

And, installed this package.
@babel/plugin-transform-runtime --dev

And, made new file “.babelrc” the config file.

and added this into there.

So executed.

Summary

1. install these package.

npm install @babel/core @babel/register @babel/preset-env --save-dev
npm i @babel/plugin-transform-runtime --dev

2. make a babel config file on the root. The name is “.babelrc and fill the configs

3. make a front wrapper file, ‘start.js’

This file only takes the role to a transcripting to ES5 for your server.js.