创建反应应用 + Django 部署 Uncaught SyntaxError: Unexpected token <

Posted 2023-02-24

【中文标题】创建反应应用 + Django 部署 Uncaught SyntaxError: Unexpected token <

【英文标题】：Create react app + Django deployment Uncaught SyntaxError: Unexpected token <

【发布时间】：2018-03-08 22:21:48

【问题描述】：

我一直在尝试将应用程序部署到 pythonanywhere 但页面只是空白，因为 ma​​in.6f259c1b.js 文件抛出错误`

Uncaught SyntaxError: Unexpected token

` 我一直在关注这篇文章https://www.fusionbox.com/blog/detail/create-react-app-and-django/624/ 和这篇https://www.techiediaries.com/create-react-app-django/ 的说明 两篇文章都建议创建一个包含以下内容的视图

class FrontendAppView(View):
    """
    Serves the compiled frontend entry point (only works if you have run `yarn
    run build`).
    """

    def get(self, request):
        try:
            with open(os.path.join(settings.REACT_APP_DIR, 'build', 'index.html')) as f:
                return HttpResponse(f.read())
        except FileNotFoundError:
            logging.exception('Production build of app not found')
            return HttpResponse(
                """
                This URL is only used when you have built the production
                version of the app. Visit http://localhost:3000/ instead, or
                run `yarn run build` to test the production version.
                """,
                status=501,
            ) 

在应用程序网站/urls.py 中

urlpatterns = [
    url(r'^', FrontendAppView.as_view())
]

这些说明对我不起作用。和pushState 路由、react-routing 相关的东西，我不知道。我的应用在 localhost:3000 的开发服务器中运行良好，它只在 pythonanywhere 和 带有 mod_wsgi 的本地 apache 服务器中看到。 这是我的本地 apache 配置（来自 Django 文档）：

WSGIScriptAlias / /home/user/projects/myproject/myproject/wsgi.py
WSGIPythonHome /home/user/.virtualenvs/myproject
WSGIPythonPath home/user/projects/myproject/

<Directory /home/user/projects/myproject/myproject>
<Files wsgi.py>
Require all granted
</Files>
</Directory>

这是根

DocumentRoot "/srv/http"

我的部分设置

REACT_APP_DIR = os.path.join(BASE_DIR, 'frontend')
STATIC_URL = '/static/'

STATIC_ROOT = 'static'

STATICFILES_DIRS = [
    os.path.join(REACT_APP_DIR, 'build', 'static')
]

所有软件都是最新版本。 也许这个评论解决了我的问题，我只是不明白。 https://github.com/facebookincubator/create-react-app/issues/1812#issuecomment-286511320

这是我的本地主机截图

我的项目目录结构

├── api_v0
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   ├── models.py
│   ├── __pycache__
│   ├── serializers.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── myproject
│   ├── __init__.py
│   ├── local.py
│   ├── __pycache__
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── frontend
│   ├── build
│   ├── node_modules
│   ├── package.json
│   ├── package-lock.json
│   ├── public
│   ├── README.md
│   └── src
├── manage.py
├── requirements.txt
├── static
│   ├── admin
│   ├── css
│   ├── js
│   ├── media
│   └── rest_framework
└── website
    ├── admin.py
    ├── apps.py
    ├── __init__.py
    ├── management
    ├── middleware.py
    ├── migrations
    ├── models.py
    ├── __pycache__
    ├── tests.py
    ├── urls.py
    └── views.py

【问题讨论】：

天哪，当你问别人然后你自己找到解决方案时总是有帮助的，这很奇怪。这个答案给了我正确的方向***.com/a/23416586/7945930 碰巧我阅读了 Django 文档的服务文件部分，但选择了第一个简单的配置，它不完整。现在我必须弄清楚这应该如何在 pythonanywhere 上工作

能不能直接点入 main.6f259c1b.js 看看语法错误在哪里？

@conrad 看起来错误已经消失了不知道是配置 apache 解决了这个问题还是更改了 react jsx 文件。

可能是后者

【参考方案1】：

查看页面上引用的样式，并确保页面上的所有 CSS 文件都使用 <link> 标签而不是 <script> 标签引用。

reference

还有 nginx adubting ，你可以请求你的站点管理员帮助