在 WebStorm 中运行新创建的 React JS 应用程序时出错答案

【问题标题】：Error while running a new created React JS app in WebStorm在 WebStorm 中运行新创建的 React JS 应用程序时出错
【发布时间】：2018-03-23 06:06:33
【问题描述】：

我刚刚使用 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
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 经验的人可以帮助我解决这个问题。

【问题讨论】：

请阅读How to Ask 和MCVE。如果您不向我们展示任何代码，您希望我们如何帮助您解决问题？
@stybl，你用过 Webstorm 吗，它会自动生成代码，就像你最初创建新项目时的简单模板一样，所以我没有添加任何东西，但它会因该错误而崩溃
我会建议你读好问题
尝试对节点使用 require 而不是 import。常量反应 = 要求（'反应'）;使用 Create React App 开始使用 react 应用程序。
@Etherealm，我没有得到你，但让我尝试使用 post index.js 和 App.js 更新我的

标签： javascript reactjs webstorm

【解决方案1】：

从错误消息中，我可以看到您正在尝试使用 Node.js 运行 React 组件。奇怪的想法。 React 应用程序在浏览器中运行，这是一个客户端代码，因此您必须构建您的应用程序，启动它所在的服务器（在使用 File | New | Project... | React App，您通常应该运行npm run start 来构建应用程序并启动开发服务器），然后使用JavaScript Debug 运行配置在浏览器中运行/调试它。

有关在 WebStorm 中调试 React 应用程序的更多信息，请参阅https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/

【讨论】：