我刚刚使用WebStorm创建了一个新的Web应用程序;它带有一个模板,我没有添加任何新代码,但是当我尝试运行它时显示此错误:
"E:\WebStormData\WebStorm 2017.2.2\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" --debug-brk=4096 --expose_debug_as=v8debug F:\MyApps\myapp\src\index.js
Debugger listening on [::]:4096
F:\MyApps\myapp\src\index.js:1
(function (exports, require, module, __filename, __dirname) { import React from 'react';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Timeout.Module.runMain [as _onTimeout] (module.js:604:10)
at ontimeout (timers.js:386:14)
at tryOnTimeout (timers.js:250:5)
我的index.js
。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
我的App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
我的App.test.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
有一位有WebStorm经验的人帮助我解决这个问题。
答案 0 :(得分:1)
从错误消息中我可以看到您正在尝试使用 Node.js 运行React组件。奇怪的想法。 React应用程序在浏览器中运行,这是一个客户端代码,因此您必须构建应用程序,启动它所托管的服务器(在使用文件|新建|项目... | React App <创建的应用程序中) / strong>,您通常应该运行npm run start
来构建应用程序并启动开发服务器),然后使用JavaScript Debug运行配置在浏览器中运行/调试它。
有关在WebStorm中调试反应应用的详细信息,请参阅https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/