在WebStorm中運行新創建的React JS應用程序時出錯

-4

我剛剛使用WebStorm創建了一個新的Web應用程序;它帶有一個模板，我還沒有添加任何新的代碼，但是當我嘗試運行它，它顯示了這個錯誤：在WebStorm中運行新創建的React JS應用程序時出錯

"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經驗來幫助我與此有關。

來源

2017-10-11 huxaiphaer Idris

請仔細閱讀[如何提問]（https://stackoverflow.com/help/how-to-ask）和[MCVE（HTTPS： //stackoverflow.com/help/mcve）。如果您沒有向我們展示任何代碼，您如何期待我們幫助您解決問題？ – stybl

@stybl，你有沒有使用Webstorm，它會自動生成代碼，就像你最初創建一個新項目時的簡單模板，所以我沒有添加任何東西，但它與該錯誤崩潰 –

我建議你閱讀完善的問題 –

從錯誤消息中我可以看到您正在嘗試運行您的React組件，其中Node.js。奇怪的想法。 React應用程序在瀏覽器中運行，這是一個客戶端代碼，因此您必須構建應用程序，啓動它所託管的服務器（在使用文件|新建|項目... | React App創建的應用程序中，您通常應運行npm run start來構建應用程序並啓動開發服務器），然後使用JavaScript Debug運行配置在瀏覽器中運行/調試它。

請參閱https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/有關調試的詳細信息，在WebStorm反應應用

來源

2017-10-13 12:38:49 lena

在WebStorm中運行新創建的React JS應用程序時出錯

回答

相關問題