使用 Flask "Uncaught SyntaxError: Unexpected token <" 為 create-react-app 提供服務

Question

我正在使用 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
        ...
    - ...

應用程序.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 語法。 我該如何解決這個問題？

Answer 1

你安裝了 Flask 嗎？

npm install flask

Answer 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}"):

它會工作得很好。