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