在 WebStorm 中运行新创建的 React JS 应用程序时出错
[英] Error while running a new created React JS app in WebStorm
本文介绍了在 WebStorm 中运行新创建的 React JS 应用程序时出错的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我刚刚使用 WebStorm 创建了一个新的网络应用程序;它带有一个模板,我没有添加任何新代码,但是当我尝试运行它时,它显示了这个错误:
"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调试器监听 [::]:4096F:\MyApps\myapp\src\index.js:1(function (exports, require, module, __filename, __dirname) { import React from 'react';^^^^^^语法错误:意外的令牌导入在 createScript (vm.js:56:10)在 Object.runInThisContext (vm.js:97:10)在 Module._compile (module.js:542:28)在 Object.Module._extensions..js (module.js:579:10)在 Module.load (module.js:487:32)在 tryModuleLoad (module.js:446:12)在 Function.Module._load (module.js:438:3)在 Timeout.Module.runMain [as _onTimeout] (module.js:604:10)在超时 (timers.js:386:14)在 tryOnTimeout (timers.js:250:5)
我的index.js
.
从'react'导入React;从 'react-dom' 导入 ReactDOM;导入'./index.css';从'./App'导入应用程序;从 './registerServiceWorker' 导入 registerServiceWorker;ReactDOM.render(, document.getElementById('root'));注册服务工作者();
我的App.js
import React, { Component } from 'react';从'./logo.svg'导入标志;导入'./App.css';类 App 扩展组件 {使成为() {返回 (<div className="应用程序"><div className="App-header"><img src={logo} className="App-logo" alt="logo"/><h2>欢迎反应</h2>
<p className="App-intro">首先,编辑 src/App.js
;并保存以重新加载.</p>
);}}导出默认应用程序;
我的App.test.js
import React, { Component } from 'react';从'./logo.svg'导入标志;导入'./App.css';类 App 扩展组件 {使成为() {返回 (<div className="应用程序"><div className="App-header"><img src={logo} className="App-logo" alt="logo"/><h2>欢迎反应</h2>
<p className="App-intro">首先,编辑 src/App.js
;并保存以重新加载.</p>
);}}导出默认应用程序;
有 WebStorm 经验的人帮我解决这个问题.
解决方案
从错误消息中我可以看出您正在尝试使用 Node.js 运行您的 React 组件.奇怪的想法.React 应用程序在浏览器中运行,这是一个客户端代码,因此您必须构建您的应用程序,启动它所在的服务器(在使用 File | New | Project... | React App 创建的应用程序中,您通常应该运行 npm run start
来构建应用程序并启动开发服务器),然后使用 JavaScript 调试 运行配置.
请参阅 https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/ 有关在 WebStorm 中调试 React 应用程序的更多信息
I have just created a new web app using WebStorm; it comes with a template and I haven't added any new code, but when I try to run it it shows this Error:
"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)
My 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();
My 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;
My 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;
Some one with WebStorm experience to help me out with this.
解决方案
From the error message I can see that you are trying to run your React component with Node.js. Strange idea. React applications are run in browser, this is a client-side code, so you have to build your application, start the server it is hosted on (in applications created using File | New | Project... | React App, you should normally run npm run start
to build the app and start dev server) and then run/debug it in browser using JavaScript Debug Run configuration.
Please see https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/ for more information about debugging react apps in WebStorm
这篇关于在 WebStorm 中运行新创建的 React JS 应用程序时出错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!