Разверните django с реакцией на heroku, Uncaught SyntaxError
У меня есть простой проект django с реакцией, и я хочу опубликовать его на heroku.
Я использую webpack-bundle-tracker, чтобы получить django и совместную работу.
Если я запускаю его на своем компьютере (сначала веб-пакет, затем сервер запуска), все работает, но при развертывании на heroku я получаю Uncaught SyntaxError: Unexpected token <, и если я открываю bundle.js в chromes dev-tools, который генерируется трекером пакетов и webpack я вижу то же, что и в index.html.
Я установил whitenoise, помогающий со статическими файлами, но это не помогает.
Вот важные файлы (строки):
index.html
<!DOCTYPE html>
{% load render_bundle from webpack_loader %}
<html>
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>The App</title>
<link rel = "stylesheet" type = "text/css" href = "/static/dist/styles.css" />
</head>
<body>
<div id = "container"></div>
{% render_bundle 'main' %}
</body>
</html>
settings.py (только важные строчки)
import django_heroku
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['static'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': '/dist/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}
}
django_heroku.settings(locals())
package.json (только скрипты)
"scripts": {
"build:dev": "webpack",
"build:prod": "webpack -p --env production",
"test": "jest --config=jest.config.json",
"heroku-postbuild": "yarn run build:prod"
},
Procfile (необходим для развертывания героку)
web: gunicorn backend.wsgi
webpack.config.js
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack')
const BundleTracker = require('webpack-bundle-tracker')
module.exports = (env) => {
const isProduction = env === 'production';
const CSSExtract = new ExtractTextPlugin('styles.css');
return {
entry: './assets/js/index.js',
output: {
path: path.join(__dirname, 'static', 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: CSSExtract.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
}]
},
plugins: [
CSSExtract,
new BundleTracker({ filename: './webpack-stats.json' }),
//makes jQuery available in every module
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
],
devtool: isProduction ? 'source-map' : 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'assets'),
historyApiFallback: true,
publicPath: '/bundles/'
}
};
};
И, наконец, я получаю ошибку: Я не знаю, видите ли вы это, h1 есть, чтобы увидеть, правильно ли загружен index.html и потенциально отображается
Как упоминалось ранее, похоже, что bundle.js имеет те же строки кода, что и index.html (за исключением строк, специфичных для django, которые были заменены). Поэтому сама ошибка очевидна, я думаю, это файл .js (jsx) и < в начале. Но почему он не компилируется, как на моей локальной машине, я не знаю.
Раньше я пытался загрузить скомпилированные файлы в репозиторий, но ошибка была той же (в этом случае я удалил скрипт heroku-postbuild, чтобы предварительно скомпилированные файлы не были перезаписаны).
Помощь типа Любой была бы очень признательна. Заранее спасибо и хорошего дня!
РЕШЕНИЕ
Я нашел решение, и действительно, это был не код. Решением было добавить дополнительный Buildpack в настройках на heroku. Добавьте «heroku / nodejs» перед «heroku / python», чтобы сначала скомпилировать интерфейс, который затем можно использовать.
Возможный дубликат Uncaught SyntaxError: Неожиданный токен:
Хм, ладно, не могли бы вы помочь с этим. Это urls.py: from django.conf.urls import include, url from django.contrib import admin from django.views.generic import TemplateView from api import urls as api_urls urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^api/', include(api_urls)), url(r'^$', TemplateView.as_view(template_name='index.html')), url(r'^(?:.*)/?$', TemplateView.as_view(template_name='index.html')), ] API-приложение - это серверная часть, r'^(?:.*)/?$' - этот URL-адрес для маршрутизации через реактивный маршрутизатор, который обрабатывается дополнительным маршрутизатором.
Кроме того, что мне кажется странным, так это то, что он работает локально, и только на героку есть ошибка.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Кажется, это не проблема с опубликованным вами кодом, но почему-то ваши / static / URL-адреса обслуживаются вашим представлением индекса. Возможно, вам потребуется показать файлы wsgi и urls.