Неожиданный токен - React babel

Question

Я новичок в мире, и у меня есть ошибка, которая не позволит мне прогрессировать. Это мой WebPack

module.exports = { 
entry: [ 
'./src/index.js' 
], 
output: { 
path: __dirname, 
publicPath: '/', 
filename: 'bundle.js' 
}, 
module: { 
loaders: [{ 
    exclude: /node_modules/, 
    loader: 'babel' 
}] 
} 
resolve: { 
extensions: ['', '.js', '.jsx'] 
}, 
devServer: { 
historyApiFallback: true, 
contentBase: './' 
} 
}; 

Это мой код JS

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import SearchBar from './components/search_bar'; 

const API = ''; 

const App =() => { 
return (
    <div> 
     <SearchBar /> 
    </div> 
); 
} 

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

Это ошибка https://gyazo.com/be83135be6f0e7b8ca0c2852536c792f

Я попытался это решение, но оно не работает babel-loader jsx SyntaxError: Unexpected token

Это проект https://github.com/jmrosdev/Practicas/tree/master/React/youtube-search

Пока и спасибо!

Answer 1

Это не удается, потому что Babel не распознает синтаксис JSX. Таким образом, вы должны установить Babel предустановку или два:

npm install --save-dev babel-preset-react babel-preset-es2015

Создайте файл .babelrc в корневом каталоге вашего проекта, если вы уже не один. Он должен иметь этот контент

{ 
    "presets": ["es2015", "react"] 
} 

Answer 2

Вы, скорее всего, не используете предварительную настройку babel-реагирования.

Убедитесь, что это в ваших зависимостей, в файле package.json (если вы не имеете его делать npm install babel-core babel-preset-es2015 babel-preset-react -D) и в loaders разделе вашего webpack.config.js сделать эту линию

module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel' 
    }] 
    } 

в этом

module: { 
loaders: [{ 
    exclude: /node_modules/, 
    loader: 'babel' 
}, 
{ 
     test: /\.js$/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015', 'react'] 
     } 

}] 

Answer 3

Я имел ту же ошибку, и причина в том, что тип = «текст/столпотворение» пропускал:

<script src="./index.js" type="text/babel"></script>