React SyntaxError：意外的標記“<”

Question

29.12.2022 更新：

當我訪問初始嵌套的所有路由（例如/或/company或/users等）時，我的bundle.js來自/static/js/bundle.js ，它包含 js 並且一切正常。 但是，當我通過輸入 url 或刷新頁面來訪問具有更多路由嵌套的頁面時，它會給我錯誤，因為bundle.js現在不是來自/static/js/bundle.js ，而是來自/company/static/js/bundle.js它包含 html。因此發生錯誤

[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (bundle.js:1)
[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (vendors~main.chunk.js:1)
[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (main.chunk.js:1)

所以看起來我必須更改 webpack 配置以在每個請求上提供/static/js/bundle.js ，無論嵌套是什么，但我無法找到應該更改的位置

這是我的config-overrides.js文件：

const path = require("path");
// const TerserPlugin = require("terser-webpack-plugin");
const { DefinePlugin } = require("webpack");
const rewireSvgSpriteLoader = require("react-app-rewired-svg-sprite-loader");
// const webpack = require("react-app-rewired");
// const { devServer } = require('react-app-rewired/config-overrides')

module.exports = {
   webpack: function override(config, env) {
      config.resolve = {
         ...config.resolve,
         alias: {
            ...config.alias,
            "@components": path.resolve(__dirname, "src/components"),
            "@pages": path.resolve(__dirname, "src/pages"),
            "@hooks": path.resolve(__dirname, "src/hooks"),
            "@mock": path.resolve(__dirname, "src/mock"),
            "@scss": path.resolve(__dirname, "src/scss"),
            "@services": path.resolve(__dirname, "src/services"),
            "@store": path.resolve(__dirname, "src/store"),
            "@interfaces": path.resolve(__dirname, "src/types"),
            "@utils": path.resolve(__dirname, "src/utils"),
            "@ui": path.resolve(__dirname, "src/ui"),
            "@modals": path.resolve(__dirname, "src/modals"),
            "@assets": path.resolve(__dirname, "src/assets"),
            "@http": path.resolve(__dirname, "src/http"),
         },
      };
      config.module.rules = [
         ...config.module.rules,
         {
            test: /\.module\.scss$/,
            include: path.resolve(__dirname, "./src/components"),
            use: [
               {
                  loader: "sass-resources-loader",
                  options: {
                     resources: require("./src/scss/scss-resourses"),
                  },
               },
            ],
         },
      ];
      config = rewireSvgSpriteLoader(config, env);

      config.resolve.modules = [path.resolve("src")].concat(config.resolve.modules);
      config.output = {
         ...config.output,
         publicPath: "",
      };
      config.plugins = [
         ...config.plugins,
         new DefinePlugin({
            "process.env.URL": JSON.stringify(process.env.URl),
            "process.env.API_URL": JSON.stringify(process.env.API_URL),
            "process.env.EDITOR_URL": JSON.stringify(process.env.EDITOR_URL),
         }),
      ];
      return config;
   },

   devServer: function(configFunction) {
      return function(proxy, allowedHost) {
         const config = configFunction(proxy, allowedHost)

         config.historyApiFallback.disableDotRule = true
         return config
      }
   }
}

Answer 1

我認為第一個屏幕截圖不是您的 JS 文件，而是來自服務器的錯誤消息。 它作為一個 JS 文件包含（代替您的 JS 腳本到您的主要 HTML 中），這會導致您在控制台中看到的錯誤。

它可能是對錯誤的 HTTP 調用的響應，腳本標記中有錯誤的 URL。 我在“清單”之后看到一條奇怪的注釋，其中可能包含錯誤消息“只有公共文件內部 (...)”，但由於我看不到完整的響應，所以我無法判斷問題出在哪里。

如果可以，請復制整個服務器響應以幫助我找出根本原因。 如果我不得不猜測這是一個反應路由器配置錯誤，您的 URL 指向您的公共文件夾。

Answer 2

SPA 服務器應為所有非真實文件的路徑返回 index.html，因此您會看到 HTML 頁面以獲取其他未找到的路徑是可以理解的。 這樣 SPA 應用程序就可以自己進行路由。

現在看起來您可能在https://vgokna.ru/company/上，並且該頁面嘗試從. 而不是/ ，所以https://vgokna.ru/company/static/js/...被請求（並且因為它會否則為 404，服務器返回index.html頁面）。 您需要確保 HTML 頁面嘗試從服務器根目錄而不是頁面目錄加載腳本（和其他資產）。 IOW，如果你有

<script src="static/js/bundle.js">

你需要

<script src="/static/js/bundle.js">

反而。

Answer 3

問題出在config-overrides.js的這一行

config.output = {
     ...config.output,
     publicPath: "",
};

我不得不更改公共路徑，因為 static 個 js 文件的路徑（ /static/bundle.js ）與 react 的公共路徑（/static/images/**.png 等）沖突，所以我無法正確獲取 js