React Unexpected token < - babel loader
I checked on my notebook, You have just lot of entries missing in package.json and You are using not supported features. After changing these files run 'npm install' and npm start should wotk :)
package.json
{
"name": "eshop_frontend_template",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
"build": "webpack -p --progres --config ./webpack.config.js --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://[email protected]/d3tr1tus/eshop_frontend_template.git"
},
"keywords": [],
"author": "Filip Březina <[email protected]> (localhost:8080)",
"license": "MIT",
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
},
"devDependencies": {
"@babel/core": "^7.1.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"react-hot-loader": "^4.3.11",
"style-loader": "^0.23.0",
"url-loader": "^1.1.1",
"webpack": "^4.20.1",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.0",
"@babel/polyfill": "^7.0.0",
"@coreui/coreui": "^2.0.9",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
"@coreui/react": "^2.0.5",
"axios": "^0.18.0",
"chart.js": "^2.7.2",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"flag-icon-css": "^3.2.0",
"font-awesome": "^4.7.0",
"json-loader": "^0.5.7",
"node-sass": "^4.9.3",
"react": "^16.5.2",
"react-chartjs-2": "^2.7.4",
"react-dom": "^16.5.2",
"react-loadable": "^5.5.0",
"react-localize-redux": "^3.4.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"reactstrap": "^6.4.0",
"redux": "^4.0.0",
"redux-localstorage-simple": "^2.1.4",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^5.1.1",
"redux-thunk": "^2.3.0",
"sass-loader": "^7.1.0",
"simple-line-icons": "^2.4.1",
"style-loader": "^0.23.0",
"universal-cookie": "^3.0.4"
}
}
webpack.config.js
const webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env','@babel/react'],
plugins: ['@babel/proposal-class-properties', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import']
}
}
},
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]},
{ test: /\.json$/, loader: "json-loader" },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: './dist/index.html'
})
],
devServer: {
contentBase: './dist',
hot: true
}
};