Question

我有一个简单的django with react项目，我想在heroku上发布它。我使用webpack-bundle-tracker获取django并做出反应。如果我在我的计算机上运行它（第一个webpack，然后是runserver），一切正常，但是部署在heroku上，我得到了Uncaught SyntaxError: Unexpected token <，如果我在chromes dev-tools中打开bundle.js，这是由bundle-tracker和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 （heroku部署需要）

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/'
        }
    };
};

最后我得到的错误： I dont know if you can see it, the h1 is there, to see if index.html is even loaded properly and potentially showed

如前所述，似乎bundle.js与index.html具有相同的代码行（除了被替换的django特定行）。因此，我认为错误本身很明显，它是一个.js（jsx）文件，而开头是<。但是为什么它不会像在我的本地机器上那样编译，我也不知道。

之前我尝试在存储库中上传已编译的文件，但错误是相同的（在这个例子中我删除了heroku-postbuild脚本，因此预编译的文件没有被覆盖）。

非常感谢任何类型的帮助。在此先感谢您，祝您度过愉快的一天！

解

我找到了解决方案，事实上，它并不是代码。解决方案是在heroku的设置下添加一个额外的Buildpack。添加＆＃39; heroku / nodejs＆＃39;之前＆＃39; heroku / python＆＃39;首先编译前端，然后可以使用它。

部署django，对heroku，Uncaught SyntaxError做出反应

0 个答案: