Webpack Fehler bundle.js:1 Uncaught SyntaxError: Unexpected token <

Mir läuft der server localhost und erhalten den Fehler " bundle.js:1 Uncaught SyntaxError: Unexpected token <
In der Ausgabe bundle.js ist html-code index.html Datei. Dies ist die Einstellung meinem webpack.config-Datei. Können Sie mir bitte sagen, was falsch mit der Einstellung? 

import path from 'path';
import webpack from 'webpack';

export default {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    path.join(__dirname, '/client/index.js' )
    ],
  output: {
    path: '/',
    publicPath: '/'
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'client'),
        loaders: ['react-hot-loader', 'babel-loader' ]
      }
    ]
  },
  resolve: {
    extensions: ['.js']
  }    
}

index.html

<html>

 <head>
   <meta charset="UTF-8">
   <title>Site</title>
   <meta content="width=device-width, initial-scale=1" name="viewport" />
 </head>

 <body>
   <h1>Hello bla bla bla</h1>
   <div id="app"></div>

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

 </html>

server/index.js

import express from 'express';
import path from 'path';

import webpack from 'webpack';
import webpackMiddeleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config';


let app = express();

const compiler = webpack(webpackConfig);

app.use(webpackMiddeleware(compiler, {
  hot: true,
  publicPath: webpackConfig.output.publicPath,
  noInfo: true
}));
app.use(webpackHotMiddleware(compiler));

app.get('/*', (req, res)=>{
  res.sendFile(path.join(__dirname, './index.html'));
});

app.listen('3000', ()=>{console.log('Running on port 3000')});

client/index.js

import React from 'react';
import { render } from 'react-dom';
import App from './components/App';

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

components/App.js

import React from 'react';

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

export default App;

Paket.json:

{
  "name": "xxxxx",
  "version": "1.0.0",
  "description": "xxxxxxxxxx",
  "main": "index.js",
  "scripts": {
    "server": "nodemon --watch server --exec babel-node -- server/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "xxxxxxxxxxxxx"
  },
  "keywords": [
    "
  ],
  "author": "xxxxxxxxx",
  "license": "ISC",
  "bugs": {
    "url": "xxxxxxxxxxxxxxxxxxxxxxx"
  },
  "homepage": "xxxxxxxxxxxxxxxxxxxx",
  "dependencies": {
    "babel-cli": "^6.24.1",
    "express": "^4.15.3",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
  "devDependencies": {
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "nodemon": "^1.11.0",
    "react-hot-loader": "^1.3.1",
    "webpack": "^2.6.1",
    "webpack-dev-middleware": "^1.10.2",
    "webpack-hot-middleware": "^2.18.0"
  }
}

.babelrc

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

Danke.

wie ist Ihre client/index.js?
ich fügte hinzu, im Körper die Frage.
Es ist sehr wahrscheinlich, dass Sie fehlen, Unterstützung zu JSX.
Könnte man auch einfügen, Ihre bundle-Datei?
bundle.js enthält code des index.html Datei.

InformationsquelleAutor Stefan Hansch | 2017-06-14

  1. 8

    Ihre bundle.js src in Ihrem script - tag ist falsch. Es ist die Rückkehr Ihrer wichtigsten index.html, das ist, warum Sie immer, dass Fehler - die JS-parser versucht zu Parsen einer HTML-Datei.

    Müssen Sie fügen Sie einen Schrägstrich, um Ihre Skript-src:
    <script src="/bundle.js"></script>

    Wenn das nicht funktioniert, müssen Sie überprüfen Sie Ihre output config.

    Ich habe das gleiche Problem und ich denke, Sie wies in die richtige Richtung. Ich doppelt überprüft script-tag in html-Datei <script type="text/javascript" src="/bundle.js"></script> als Sie sieht alles gut aus. Ich Frage mich, Ob ich konfiguriert webpack zu setzen Bündel in public Ordner, welchen Wert publicPath enthalten sollte? Aktuelle habe ich publicPath: '/'
    Sie sollten öffnen Sie eine neue Frage und teilen Sie Ihre webpack config, etc.

    InformationsquelleAutor enapupe

  2. 0

    Mehrere Einstiegspunkte, aber nicht die Einrichtung der Ausgabe.

    https://github.com/webpack/docs/wiki/configuration#entry

    Sorry, aber wie Einstellung Ausgang? Ich fügte hinzu, Ausgabe: { path: '/' publicPath: '/' }
    Versuchen Sie, mit dem Namen, um Ihre Ausgabe: { path: '/' publicPath: '/' filename: 'bundle.js' } Und prüfen, Ob Sie die Einstellung der Pfad-Routen korrekt als enapupe sagte auf den Kommentar. Und warum müssen Sie 'webpack-hot-middleware/client" als Einstiegspunkt ?
    hm... ja, ich habe mit dem Namen: 'bundle.js' jetzt arbeiten. Ich brauche webpack-hot-middleware/client für die Veränderung von Daten auf dem browser, ohne die Seite neu laden
    Froh zu hören, dass es nun funktioniert 🙂 viele Grüße!

    InformationsquelleAutor Tuko90

  3. -1

    Ich habe das gelöst, indem Sie hinzufügen filename Element-Objekt-Ausgabe:

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

    InformationsquelleAutor Oleg Rostov

Schreibe einen Kommentar