0

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?

Justin Grant
  • 44,807
  • 15
  • 124
  • 208
  • Looks like you're using `import` in a non-ES6 environment. – Andrew Li Feb 26 '17 at 06:07
  • Create React App is not generating a Node.js project. Its build pipeline uses Node.js, but the resulting project itself runs in the browser. I don't think it makes sense to attach VS debugger to the Node.js process in this case. I don't know how to debug in Visual Studio, but the User Guide includes a section on debugging with VS Code. – Dan Abramov Feb 26 '17 at 17:53

2 Answers2

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

visual studio

ftnilsson
  • 2,193
  • 2
  • 12
  • 10
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.

Chris Herring
  • 3,675
  • 3
  • 33
  • 50
  • 1
    Create React App already includes both Babel and Webpack internally. You never need to use them directly if your project is built with Create React App. You just need to run `npm start` to run the development server. – Dan Abramov Feb 26 '17 at 17:54