WebStorm에서 새로 만든 React JS 앱을 실행하는 중 오류가 발생했습니다.

-4

방금 WebStorm을 사용하여 새 웹 앱을 만들었습니다. 이 템플릿을 함께 제공하고 나는 새로운 코드를 추가하지 않은,하지만 난 그것을 실행하려고 할 때이 오류 보여줍니다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();

내

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.js
내 WebStorm 경험을 가진 어떤 일이 나를 도울 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;

출처

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 응용 프로그램은 브라우저에서 실행됩니다.이 코드는 클라이언트 측 코드이므로 응용 프로그램을 빌드하고 호스트 된 서버를 시작해야합니다 (File | New | Project ...를 사용하여 생성 한 응용 프로그램에서) | React App, 일반적으로 npm run start을 실행하여 응용 프로그램을 빌드하고 dev 서버를 시작해야합니다.) JavaScript Debug 구성을 사용하여 브라우저에서 실행/디버깅하십시오.

WebStorm에서 응용 프로그램을 반응 디버깅에 대한 자세한 내용은 https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/를 참조하십시오

출처

2017-10-13 12:38:49 lena

WebStorm에서 새로 만든 React JS 앱을 실행하는 중 오류가 발생했습니다.

답변

관련 문제