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
Vous devez vous connecter pour publier un commentaire.
Votre
bundle.js
src dans votrescript
balise est mal. C'est le retour de votre principalindex.html
, c'est pourquoi vous obtenez cette erreur - la JS analyseur est d'essayer d'analyser un fichier HTML.Vous devez ajouter une barre oblique à votre script src:
<script src="/bundle.js"></script>
Si cela ne fonctionne pas, vous devez double-vérifier votre
output
config.public
dossier quelle valeurpublicPath
doit-elle contenir? Actuelle j'aipublicPath: '/'
Vous utilisez de multiples points d'entrée, mais pas de la configuration de la sortie.
https://github.com/webpack/docs/wiki/configuration#entry
J'ai résolu ce problème en ajoutant
filename
point de sortie de l'objet: