Ошибка сборки модуля - Webpack, React, Babel

Я следовал видеоуроку из множественного зрения. Название курса - «Создание приложения реального времени с реакцией, флюсом, Webpack и Firebase».Ошибка сборки модуля - Webpack, React, Babel

См. Ниже код и прилагаемый скриншот из вопроса, который у меня есть. Webpack терпит неудачу, когда я пытаюсь восстановить файлы. Может кто-нибудь, пожалуйста, сообщите, что это может быть. В настоящее время я использую все последние библиотеки.

/*webpack.config.js*/ 

module.exports = { 
entry: { 
    main: [ 
     './src/main.js' 
    ] 
}, 
output: { 
    filename: './public/[name].js' 
}, 
module: { 
    loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel' 
     } 
    ] 
} 
} 



    /*App.jsx*/ 
    import React from 'react'; 

class App extends React.Component { 
constructor() { 
    super(); 
    this.state = { 
     messages: [ 
      'hi there how are you ?', 
      'i am fine, how are you ?' 
     ] 
    } 
} 

render() { 
    var messageNodes = this.state.messages.map((message)=> { 
     return (
      <div>{message}</div> 
     ); 
    }); 

    return (
     <div>{messageNodes}</div> 
    ); 
} 
} 

export default App; 

/*main.js*/ 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './components/App.jsx'; 

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

/*index.html*/ 
<!DOCTYPE html> 
<html> 
    <head> 
<title></title> 
<meta charset="utf-8" /> 
</head> 
<body> 
<div id="container"></div> 
<script src="public/main.js"></script> 
</body> 
</html> 

/*package.json */ 

{ 
"name": "reatapp", 
"version": "1.0.0", 
"description": "", 
"main": "index.js", 
"scripts": { 
"test": "echo \"Error: no test specified\" && exit 1" 
}, 
"author": "", 
"license": "ISC", 
"dependencies": { 
"babel-core": "^6.1.2", 
"babel-loader": "^6.0.1", 
"babel-preset-react": "^6.1.2", 
"babelify": "^7.2.0", 
"react": "^0.14.2", 
"react-dom": "^0.14.2", 
"webpack": "^1.12.3" 
} 
}

источник

2015-11-10 Erkan Demir

Может быть, с 'output: {filename: ./public/ [name] .js}'. Попробуйте добавить еще один ключ для пути: 'путь: './Public''. Но я также вижу, что ваш главный 'main.js', тем временем у вас есть свой код в' app.jsx'. Вы импортировали приложение из ./components/app.jsx '; '? – leocreatini

@LeoCreatini, что заставляет вас думать, что это проблема. Проблема началась после добавления кода React. Пожалуйста, см. Прикрепленный снимок экрана моего каталога файлов. –

Я также видел отсутствующую точку с запятой в 'return()' '' return(); 'И отсутствующая точка с запятой в' this.state = {} ' – leocreatini

Она была решена. Ответ заключался в установке пресетов npm i --save babel-preset-es2015 babel-preset-react. Затем добавьте еще один ключ в webpack.config.js, в загрузчик: query: {presets: ['es2015', 'react'] }. Должно быть хорошо идти.

источник

2015-11-10 03:18:14 leocreatini

Thx man. Примеры и учебники устаревают очень быстро. – Andrew

работал и на меня. – fuLLMetaLMan

Ошибка сборки модуля - Webpack, React, Babel

ответ

Смежные вопросы