使用 Flask "Uncaught SyntaxError: Unexpected token <" 为 create-react-app 提供服务答案

【问题标题】：Serving a create-react-app with Flask "Uncaught SyntaxError: Unexpected token <"使用 Flask "Uncaught SyntaxError: Unexpected token <" 为 create-react-app 提供服务
【发布时间】：2019-09-13 18:41:20
【问题描述】：

我正在使用 react-create-app 构建一个 Web 应用程序，并希望使用烧瓶来提供它。前端是使用

生成的

npx create-react-app frontend
cd frontend
npm run build

我的项目结构如下：

- backend
    - static
    - templates
    - app.py
- frontend
    - build
        - static
            - css
                ...
            - js
                ...
            - media
                ...
        - favico.ico
        - index.html
        - service-worker.js
        - ...
    - public
        ...
    - src
        ...
    - ...

app.py

from flask import Flask, send_from_directory
import os


app = Flask(__name__, static_folder=r'..\frontend\build')


@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve(path):
    if path != "" and os.path.exists("/static/" + path):
        return send_from_directory(app.static_folder, path)
    else:
        return send_from_directory(app.static_folder, 'index.html')


if __name__ == '__main__':
    app.run(use_reloader=True, port=5000, threaded=True, debug=True)

如果我正在运行 serve -s build 应用程序运行并且一切都很好。但是，运行 python app.py 会显示一个空白页面，并且 chromes 控制台会显示以下错误：

Uncaught SyntaxError: Unexpected token < 2.b41502e9.chunk.js:1
Uncaught SyntaxError: Unexpected token < main.4001340c.chunk.js:1 
Manifest: Line: 1, column: 1, Unexpected token. :5000/manifest.json:1

浏览器似乎无法解释 jsx 语法。我该如何解决这个问题？

【问题讨论】：

你能发布 JSX 代码吗
它在 chunk.js 的第一行 - 看看它，那里可能只是一个流氓括号
@KOTIOS 隔离我使用 react-create-app untouched 的问题。

标签： javascript reactjs flask react-create-app

【解决方案1】：

你安装 Flask 了吗？

npm install flask

【讨论】：

【解决方案2】：

刚刚自己解决了这个问题，实际上您实际上是在为所有请求提供index.html。所以*chunk.js 是 html，而不是 Javascript，所以会出现语法错误。

这是因为：

if path != "" and os.path.exists("/static/" + path):

总是错误的。 /static/ 在此上下文中不是有意义的路径。

改成：

if path != "" and os.path.exists(f"{app.static_folder}/{path}"):

它会正常工作的。

【讨论】：