others - Javascript - Uncaught SyntaxError: Unexpected token '<' in bundle.js:1

public/index.html


<!DOCTYPE html>


<html>


<head>


 <meta charset="UTF-8">


 <meta name="viewport" content="width=device-width, initial-scale=1">


 <title>-= PROJECT TITLE PLACEHOLDER =-</title>


 <script src="/bundle.js" defer></script>


</head>


<body>


 <div id="app"></div>


</body>


</html>

app/index.js


import '../public/style.css'


import React from 'react'


import ReactDOM from 'react-dom'


import { Provider } from 'react-redux'


import store from './redux'


import Users from './components/Users'



ReactDOM.render(


 <Provider store={store}>


 <Users />


 </Provider>,


 document.getElementById('app')


)

webpack.config.js


'use strict'



const { resolve } = require('path')



module.exports = {


 entry: ['babel-polyfill', './app/index'],


 output: {


 path: __dirname,


 filename: './public/bundle.js'


 },


 mode: 'development',


 context: __dirname,


 devtool: 'source-map',


 resolve: {


 extensions: ['.js', '.jsx']


 },


 module: {


 rules: [


 {


 test: /jsx?$/,


 include: resolve(__dirname, './app'),


 loader: 'babel-loader',


 options: {


 presets: ['react']


 }


 },


 {


 test: /.css$/,


 use: [


 'style-loader',


 'css-loader'


 ]


 }


 ]


 }


}

package.json


{


"name":"boilermaker",


"version":"0.0.1",


"description":"boilerplate for react-redux-express-sequelize app",


"main":"server/index.js",


"scripts": {


"start-dev":"npm run build-watch & npm run start-server",


"start-server":"nodemon --watch server -e js,html --ignore public server/index.js",


"build-watch":"webpack -w",


"start":"echo 'Running server for production - developers, use npm run start-dev for development' && node server/index.js",


"seed":"node seed.js"


 },


"keywords": [


"react",


"redux",


"skeleton"


 ],


"dependencies": {


"axios":"^0.18.0",


"body-parser":"^1.18.2",


"chalk":"^2.4.1",


"connect-session-sequelize":"^6.0.0",


"crypto":"^1.0.1",


"express":"^4.14.0",


"express-session":"^1.17.0",


"lodash":"^4.17.15",


"morgan":"^1.9.1",


"passport":"^0.4.0",


"passport-google-oauth":"^2.0.0",


"pg":"^7.4.3",


"react":"^16.8.6",


"react-dom":"^16.8.6",


"react-redux":"^5.0.7",


"react-router":"^4.3.1",


"react-router-dom":"^4.2.2",


"redux":"^4.0.0",


"redux-logger":"^3.0.6",


"redux-thunk":"^2.2.0",


"sequelize":"^4.37.8"


 },


"devDependencies": {


"babel-core":"^6.26.3",


"babel-eslint":"^8.2.3",


"babel-loader":"^7.1.4",


"babel-polyfill":"^6.26.0",


"babel-preset-env":"^1.7.0",


"babel-preset-react":"^6.24.1",


"babel-preset-stage-2":"^6.24.1",


"babel-register":"^6.26.0",


"css-loader":"^2.1.1",


"eslint":"^4.19.1",


"eslint-config-fullstack":"^5.0.0",


"eslint-plugin-react":"^7.8.2",


"nodemon":"^1.19.1",


"redux-devtools-extension":"^2.13.8",


"style-loader":"^0.21.0",


"webpack":"^4.39.2",


"webpack-cli":"^3.3.7"


 }


}

babelrc


{


"presets": ["react","env","stage-2"]


}

时间:

你需要更新你的babel-loader规则:


{


 test: /(jsx|js)?$/, // you have app/index.js not app/index.jsx


 include: resolve(__dirname, './app'),


 loader: 'babel-loader',


 options: {


 presets: ['react']


 }


 },



编辑:同样我在你的package.json中没有看到babel配置,也没有看到.babelrc,因此这是假设该配置位于.babelrc中,并且已正确设置为React/JSX(我看到babel-preset-react -在package.json,我很确定你需要)

...