2016-10-18 2 views
2

Я новичок в React.JS (в Windows 10), я выполняю первый барабан внутри, я использую для создания базовой рабочей области для своего React.app. Но после настройки пакетов webpack и babel во всем мире и локально в моем репозитории и создании первого приложения для приветствия, первая сборка не сработала.REACT.JS: Многократная основная ошибка

моя предварительная установка:

npm install -g babel 
npm install -g babel-cli 
npm install webpack --save 
npm install webpack-dev-server --save 
npm install react --save 
npm install react-dom --save 
npm install babel-core 
npm install babel-loader 
npm install babel-preset-react 
npm install babel-preset-es2015 

поэтому мой package.json содержит:

{ 
    "name": "reactapp", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --hot" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-cli": "^6.0.0", 
    "babel-core": "^6.17.0", 
    "babel-loader": "^6.2.5", 
    "babel-preset-es2015": "^6.16.0", 
    "babel-preset-react": "^6.16.0", 
    "react": "^15.3.2", 
    "react-dom": "^15.3.2", 
    "webpack": "^1.13.2", 
    "webpack-dev-server": "^1.16.2" 
    } 
} 

мой репозиторий содержит 4 другие файлы: index.html, App.jsx , main.js, webpack.config.js

index.html:

<!DOCTYPE html> 
<html lang = "en"> 

    <head> 
     <meta charset = "UTF-8"> 
     <title>React App</title> 
    </head> 

    <body> 
     <div id = "app"></div> 
     <script src = "index.js"></script> 
    </body> 

</html> 

App.jsx:

import React from 'react'; 

class App extends React.Component { 
    render() { 
     return (
     <div> 
      Hello World!!! 
     </div> 
    ); 
    } 
} 

export default App; 

main.js:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App.jsx'; 

ReactDOM.render(<App />, document.getElementById('app')); 

webpack.config.js

var config = { 
    entry: './main.js', 

    output: { 
     path:'./', 
     filename: 'index.js', 
    }, 

    devServer: { 
     inline: true, 
     port: 8123 
    }, 

    module: { 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel', 

      query: { 
       presets: ['es2015', 'react'] 
      } 
     } 
     ] 
    } 
} 

module.exports = config; 

поэтому, когда я буду запускать "старт НПМ" я получаю неудавшуюся сборку (захват -attached-)

enter image description here

и точно так же, на локальном хосте: 8123, я получать ту же ошибку, как показано ниже: enter image description here

Любое предложение, чтобы решить, что ??

+0

'запись:«./main.js»' –

+0

да это было, но он по-прежнему не работает – firasKoubaa

+0

может быть, что он пытается перезагрузить main.js после того, как цель для сборки находится на том же пути, что и ваш исходный код? Почему бы не поместить ваши записи и исходные файлы в отдельный каталог, так что webpack не запутывается после этого – Icepickle

ответ

0

я ве просто решить ее, удалив node_modules папку и retaping НПМ установки