CODEWITHSUNDEEP
node.jsvisual-studioreactjsvisual-studio-2017node.js-tools
Justin Grant
Justin Grant

Reputation: 46673

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

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:

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?

Upvotes: 0

Views: 2331

Answers (2)

ftnilsson
ftnilsson

Reputation: 2193

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

Upvotes: 2

Chris Herring
Chris Herring

Reputation: 3665

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.

Upvotes: 1

Related Questions