Я пытаюсь настроить шаблон для реагирования веб-приложений.
Однако каждый раз, когда я перехожу к http://localhost: 8080/, я получаю сообщение об ошибке: Uncaught SyntaxError: Unexpected token <
. В моем bundle.js.
Я понятия не имею, что делать! Спасибо за любую помощь.
Вот некоторые из моих файлов:
/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New app</title>
<link rel="stylesheet" href="/style.css" />
<script src="./bundle.js" defer> .</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
/client/app.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello, world!</div>,
document.getElementById('app')
);
webpack.config.js
module.exports = {
entry: [
'@babel/polyfill', // enables async-await
'./client/app.js',
],
mode: 'development',
output: {
path: __dirname,
filename: './public/bundle.js',
},
devtool: 'source-maps',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
};
package.json
{
"name": "boilerplatelivmarx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server",
"start-dev": "webpack -w & nodemon server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"express": "^4.16.4",
"path": "^0.12.7",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"react-router-dom": "^4.3.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-react": "^6.24.1",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2"
}
}
Спасибо!
Ваша проблема - неправильная обработка jsx
;
Добавьте webpack.config.js
пресет в свой webpack.config.js
:
...
use: {
loader: 'babel-loader',
options: {
presets: ['react']
}
},
...
Кроме того, похоже, что вы пытаетесь использовать @babel/polyfill
, но не устанавливали его.
Бежать:
npm i @babel/polyfill
И вам не нужна точка в <script>
в файле index.html
:
<!-- ↓ -->
<script src="./bundle.js" defer> .</script>
После этого все должно строиться:
И запустите:
Unexpected token <
= - это ошибка, обычно возникающая, когда веб-сервер возвращаетhtml
вместоjson
илиjavascript
. Это может произойти из-за того, что веб-сервер возвращает страницу с ошибкой, возможно, из-за недостаточных прав или неправильного / неправильно сформированного URL-адреса. Используйте вкладку сети браузера, чтобы увидеть, какое реальное значение результата было получено.