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

J'exécute le serveur localhost et obtenez l'erreur bundle.js:1 Uncaught SyntaxError: Unexpected token <
En sortie bundle.js est code html de index.html fichier. C'est la définition de mon webpack.fichier de configuration. Pouvez-vous me dire de quel mal avec réglage?

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;

paquet.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" ]
}

Merci.

  • comment est votre client/index.js?
  • j'ai ajouté dans le corps de la question.
  • Il est très probable que vous êtes absent de soutien à JSX.
  • Pourriez-vous également copier votre fichier bundle?
  • bundle.js contient le code d'index.html fichier.
  • Nope. Bundle contient tous les JS à partir du point d'entrée et au-delà. Vous index.html est juste le fichier de démarrage qui référence l'ensemble. Si vous ne pouvez pas accéder au système de fichiers, vous pouvez l'obtenir à partir d'outils de développement ou onglet source.
  • oui, je le sais. J'ai vérifié maintenant avec les outils de dev de google chome, dans l'onglet source ouvert bundle.js et il y a mon code index.html fichier et sur 1 ligne( <html>) erreur d'affichage - unespected jeton
  • Vous devez partager son contenu autrement ne sera pas facile de vous aider. Nous avons aussi besoin de voir votre babel fichier de configuration.
  • j'ai ajouté de la capture d'écran ajouter .babelrc