create-react-app + Visual Studio + F5 = "Unexpected token import"

Question

React newbie here. How can I enable Visual Studio 2017 to run (via F5) a react.js app that's been created by create-react-app? Here's the steps I've followed so far:

• npm install -g create-react-app
• create-react-app my-app
• In Visual Studio 2016 RC (5.0.26206.0 D15REL) with Node.js Tools( 1.3.41102.00) I created a node.js project using the "from existing code" option.
• I set the startup file to src/index.js
• F5

I get this error:

Debugger listening on port 5858
 H:\dev\XXXXXX\src\index.js:1
(function (exports, require, module, __filename, __dirname) { import React from 'react';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.runMain [as _onTimeout] (module.js:429:10)
    at Timer.listOnTimeout (timers.js:92:15)
 Press any key to continue...

npm start works fine. I assume that I need to instruct Visual Studio to either execute npm start or to duplicate what npm start is doing. I'm sure I'm not the first person that's tried this. What's the recommended solution?

Answer 1

import is an ES6 feature. So generally you'd need to use something like babel to compile the javascript so that it can be used in most browsers. Create React App already includes both Babel and Webpack internally so just run npm start from the command line to start the development server. You could update your VS Project to run this as part of the build process so that you just have to hit F5.

Also since you're coming from the .NET ecosystem I'd recommend looking at the JavascriptServices templates which includes a React and React Redux template that work with .NET.

Answer 2

A bit late in the game but I had a simliar error in a project using angular and .net in visual studio 2017. I fixed it by giong to tools -> project and solutions -> Web Package Management -> External Web Tools

and moving the Path variable up in the order. see image